React: установка отключенного атрибута на основе состояния

Я хотел бы установить атрибут disabled на кнопке на основе состояния компонента, что-то вроде этого:

render() {
  return (
    <button type="button" {this.state.submitting ? 'disabled' : ''} 
      onClick={ this.handleSubmit }>Submit</button>
    );
}

на данный момент я получаю неожиданную ошибку токена при открытии {, что мне не хватает?

6
javascript react-jsx reactjs

3 ответов

вы можете установить disabled свойство через логическое значение, например

<button type="button" disabled={this.state.submitting} onClick={ this.handleSubmit }>Submit</button>

Example

12

вы можете использовать null

<button type='button' disabled={this.state.submitting ? 'disabled' : null} onClick={this.handleSubmit}>Submit</button>
1

Если вы хотите, чтобы отключенный attr был добавлен в зависимости от некоторого условия, вы можете сделать что-то вроде этого:

const disableBtnProps = {};
if (some condition) {
  disableBtnProps.disabled = false;
} else {
 disableBtnProps.disabled = true;
}

тогда в вашем компоненте вы можете сделать:

 <Button {...disableBtnProps} className="btn"> my button </Button>
0