当输入字段为空而不使用处理程序时禁用按钮

【问题标题】：Disabled a button when input filed is empty without using a handler当输入字段为空而不使用处理程序时禁用按钮
【发布时间】：2026-01-16 03:20:03
【问题描述】：

当输入字段为空时，我尝试禁用按钮而不使用处理程序。在检查条件之前，我只想在输入更改时简单地启用按钮（尚未检查输入内容是否）但我确实看到状态已更改（我可以在警报中看到）但按钮从未启用（我可以在调试器中看到）

constructor(props) {
    super(props);
    this.state = {'enableAdd':false}

}

Text: <input id="textInput" type="text" onChange={()=>{this.state.enableAdd=true;alert(this.state.enableAdd)}}/>
<button onClick={this.addTODO} disabled={!this.state.enableAdd} style={{"paddingLeft":"7px"}}>Add</button>

有什么想法吗？

谢谢

【问题讨论】：

标签： reactjs button

【解决方案1】：

您需要检查，如何更新状态值？

不要直接更改状态值this.state.enableAdd = true;，而是使用setState。

像这样：

this.setState({enableAdd=true});

查看DOC如何在React中使用state以及其他详细信息。

检查您的问题的工作示例：

class App extends React.Component {

    constructor(props) {
       super(props);
       this.state = {'enableAdd':false};
       this.addTODO = this.addTODO.bind(this);
    }
    
    addTODO(){
       console.log('clicked');
    }
  
    render(){
        return  <div>
           <input id="textInput" type="text" onChange={(e) => this.setState({enableAdd: e.target.value != ''})}/>
           <button onClick={this.addTODO} disabled={!this.state.enableAdd}>Add</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'/>

【讨论】：