web-dev-qa-db-ja.com

React：状態に基づいて無効化された属性を設定する

次のように、コンポーネントの状態に基づいてボタンの無効化属性を設定したいと思います。

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

現在、オープニング{で予期しないトークンエラーが発生しましたが、何が欠けていますか？

javascriptreactjsreact-jsx
16
jolyonruss

次のように、ブール値を使用してdisabledプロパティを設定できます

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

Example

32
Alexander T.

Nullを使用できます

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

無効化されたattrを何らかの条件に応じて追加したい場合は、次のようにすることができます。

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

次に、コンポーネントで次のことができます：

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