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

Я хотел бы установить отключенный атрибут на Button на основе состояния компонента, примерно так:

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

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

Ответы

Ответ 1

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

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

Example

Ответ 2

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

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

Ответ 3

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

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

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

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