如何在React.js中禁用按钮

如何在React.js中禁用按钮

使用

refs

不是最佳实践，因为它直接读取DOM，最好使用React的

state

。另外，您的按钮不会更改，因为该组件不会重新渲染并保持其初始状态。

每次输入字段更改时，您都可以将其

setState

与

onChange

事件侦听器一起使用以再次呈现组件：

// Input field listens to change, updates React's state and re-renders the component.<input onChange={e => this.setState({ value: e.target.value })} value={this.state.value} />// Button is disabled when input state is empty.<button disabled={!this.state.value} />

这是一个工作示例：

class AddItem extends React.Component {  constructor() {    super();    this.state = { value: '' };    this.onChange = this.onChange.bind(this);    this.add = this.add.bind(this);  }  add() {    this.props.onButtonClick(this.state.value);    this.setState({ value: '' });  }  onChange(e) {    this.setState({ value: e.target.value });  }  render() {    return (      <div className="add-item">        <input          type="text"          className="add-item__input"          value={this.state.value}          onChange={this.onChange}          placeholder={this.props.placeholder}        />        <button          disabled={!this.state.value}          className="add-item__button"          onClick={this.add}        >          Add        </button>      </div>    );  }}ReactDOM.render(  <AddItem placeholder="Value" onButtonClick={v => console.log(v)} />,  document.getElementById('View'));<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='View'></div>