如何根据状态禁用按钮?
问题描述:
在我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?
答
由于所选的值将是一个string
不是number
,你需要写这样的条件:
disabled={this.state.modelvalue === '0'} //string comparison
更新:
正如@RobG建议而不是使用===
, (检查值类型)使用==
(检查值无类型)来检查值,它将工作:
disabled={this.state.modelvalue == 0}
答
下面是正确的代码:你错过
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
只是一个建议。 ..为了便于阅读,我经常使用buttonState对象,例如。 const buttonstate = {disabled:(this.state.modelvalue == 0?true:false)}并将它传播到button