如何根据状态禁用按钮？

在我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，但由于某种原因，当你从'one'改回'plse select value'时，按钮不会被禁用？即使state.modelvalue再次为0？

来源

2017-07-04 bier hier

只是一个建议。 ..为了便于阅读，我经常使用buttonState对象，例如。 const buttonstate = {disabled：（this.state.modelvalue == 0？true：false）}并将它传播到button

由于所选的值将是一个string不是number，你需要写这样的条件：

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

更新：

正如@RobG建议而不是使用===，（检查值类型）使用==（检查值无类型）来检查值，它将工作：

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

来源

2017-07-04 04:15:04

中的混乱很快就感谢 –

或'this.state.modelvalue == 0'。 ;-) – RobG

@RobG谢谢，是的，我们可以通过'=='检查，也更新了答案:) –

下面是正确的代码：你错过

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'));

<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>

两件事： 1）添加this.handleChangeModel = this.handleChangeModel.bind（本）;在构造函数中，以便您可以在handleChangeModel中绑定上下文，因为它的回调方法为 2）使用this.state.modelvalue ===“0”而不是this.state.modelvalue === 0

来源

2017-07-04 04:45:57

如何根据状态禁用按钮？

回答

相关问题