Question

在我的reactjs应用程序中，我有一个基于状态值禁用/启用的按钮：

<button disabled={this.state.modelvalue === 0 ? true : false} onClick={this.showMessage}>Select</button>

通过更改选择值来设置modelvalue状态：

<div className="row">
      <div className="col-md-6">
            <select name="" id="" value={this.state.modelvalue} onChange={this.handleChangeModel}>
              <option value ="0">plse select value</option>
              <option value ="1">One</option>
            </select>
      </div>
</div>

 handleChangeModel(event) {
    this.setState({modelvalue: event.target.value});
 }

handleChangeModel设置state.modelvalue，但出于某种原因，当你从＆＃39; one＆＃39;回到＆＃39; plse select value＆＃39;按钮没有被禁用？即使state.modelvalue再次为0？

Answer 1

由于所选值为string而不是number，因此您需要编写如下条件：

disabled={this.state.modelvalue === '0'}   //string comparison

<强>更新

正如@RobG建议的那样，使用===（检查没有类型的值）来检查值，而不是使用==（检查值与类型），它将起作用：

disabled={this.state.modelvalue == 0}

Answer 2

以下是正确的代码：

＆＃13;

class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      modelvalue: null
    }

    this.handleChangeModel = this.handleChangeModel.bind(this);
  }

 handleChangeModel(event) {
    this.setState({modelvalue: event.target.value});
 }


  render() {
    return (
      <div className="row">
      <div className="col-md-6">
            <select name="" id="" value={this.state.modelvalue} onChange={this.handleChangeModel}>
              <option value ="0">plse select value</option>
              <option value ="1">One</option>
            </select>
      </div>

      <button disabled={this.state.modelvalue === "0" ? true : false} onClick={this.showMessage}>Select</button>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>

＆＃13;

你错过了2件事： 1）添加this.handleChangeModel = this.handleChangeModel.bind（this）;在构造函数中，以便您可以在handleChangeModel中绑定this的上下文，因为它是一个回调方法 2）使用this.state.modelvalue ===＆＃34; 0＆＃34;而不是this.state.modelvalue === 0

如何根据状态禁用按钮？

2 个答案: