Javascript 如何根据React中的多个状态禁用按钮？

我正在用React构建一个表单，我想在表单无效时禁用一个按钮，即当其中一个状态为空时。该按钮查看名为disable_button的状态。以下是我目前掌握的情况：

var MyForm = React.createClass({
  getInitialState: function() {
    return {
      group_id: '',
      ls_type_id: '',
      disable_button: false
    };
  },
  handleGroupChange: function(e) {
    this.setState({group_id: e.target.value});
  },
  handleTypeChange: function(e) {
    this.setState({ls_type_id: e.target.value});
  },
  handleClick: function() {
    console.log('Button clicked');
  },
  componentDidUpdate: function() {
    this.isFormValid();
  },
  isFormValid: function(){
    if (this.state.group_id == '' || this.state.ls_type_id == '') {
      this.setState({disable_button: true});
    } else {
      this.setState({disable_button: false});
    }
  },
  render: function() {
    return (
      <div>
        <select className='form-control' value={this.state.group_id} onChange={this.handleGroupChange}>
          <option value=''>Select group...</option>
          <option value='10'>Some group</option>
        </select>
        <br /> 
        <select className='form-control' value={this.state.ls_type_id} onChange={this.handleTypeChange}>
          <option value=''>Select type...</option>
          <option value='11'>Some type</option>
        </select>
        <br />
        <button className="btn btn-primary" onClick={this.handleClick} disabled={this.state.disable_button}>Save</button>
      </div>
    );
  }
});

ReactDOM.render(<MyForm />, document.getElementById('content'));

运行这段代码会导致一个未捕获的RangeError：超过了最大调用堆栈大小，我意识到了原因：这是因为在组件更新后，它调用我的componentDidUpdate，然后更新状态，然后更新组件，然后发生循环。所以我真的不知道当其中一个状态为空时如何使按钮禁用。我可能会添加更多表单字段，所以我不想硬编码它，只查看这两个选择。

componentDidUpdate向它传递了两个道具，prevProps和prevState as。您可以在componentUpdate中使用此事实来仅在类型id或ls类型id发生更改时调用isFormValid

但是，级联setState调用有点低效。在渲染函数中确定“禁用_”按钮可能更有意义，因为在其他任何地方都不会使用它。因此，删除isFormValid及其所有调用，并将其放在渲染的开头：

render: function () {
  var disable_button = false;
  if (this.state.group_id == '' || this.state.ls_type_id == '') {
    disable_button = true;
  }
  return ( <div> ...content </div>
}

componentDidUpdate中传递了两个道具：prevProps和prevState as。您可以在componentUpdate中使用此事实来仅在类型id或ls类型id发生更改时调用isFormValid

但是，级联setState调用有点低效。在渲染函数中确定“禁用_”按钮可能更有意义，因为在其他任何地方都不会使用它。因此，删除isFormValid及其所有调用，并将其放在渲染的开头：

render: function () {
  var disable_button = false;
  if (this.state.group_id == '' || this.state.ls_type_id == '') {
    disable_button = true;
  }
  return ( <div> ...content </div>
}

请尝试以下方法：

isFormValid: function(){
  return this.state.group_id == '' || this.state.ls_type_id == '';
}

请尝试以下方法：

isFormValid: function(){
  return this.state.group_id == '' || this.state.ls_type_id == '';
}

---

只需在更改处理程序中调用isFormValid方法。您不需要componentDidUpdate方法。任何可以在渲染期间计算的值都应该在渲染期间计算。只需在更改处理程序中调用isFormValid方法即可。您不需要componentDidUpdate方法。任何可以在渲染期间计算的值都应该在渲染期间计算。好的，是的，这很有意义，也遵循他在评论中提到的内容。我只是有一种“让可以被禁用/启用的事物成为一种状态”的想法。好吧，是的，这是有道理的，也遵循他在评论中提到的内容。我当时的想法是“让可以被禁用/启用的事物成为一种状态”。是的，基本上与另一个答案相同。我将在我的代码中使用这个。是的，基本上和另一个答案相同。我将在我的代码中使用它。