如何根據狀態禁用按鈕？

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

如何根據狀態禁用按鈕？

回答

相關問題