当 React JS 中的状态或输入值发生更改时，如何禁用按钮？

Question

我有一个包含大量输入和更新按钮的表单。我正在寻找禁用按钮的最佳方法，除非状态或输入之一发生更改。我知道让布尔状态变量保持按钮的禁用/启用状态的方式。然后在输入字段设置值相应地更改为状态变量名称时。

因为我有很多州。我需要编写一个循环遍历嵌套对象并进行比较的代码。

感谢您的帮助

Answer 1

我不明白为什么 boolean 方法会不好。

无论如何，您可以使用 lodash _.isEqual 函数将之前的模型对象与当前状态进行比较，以检查数据是否已更改。

更新（sn-p）：

class App extends React.Component {
  state = {
    foo: '',
    bar: ''
  }
  
  componentDidMount() {
    const { foo, bar } = this.props;
    this.setState({ foo, bar });
  }
  
  hasChangedSinceInitialState = () => {
    const { foo, bar } = this.props;
        
    // here you could use lodash ._isEqual if you have an bigger object
    return (foo === this.state.foo && bar === this.state.bar);
  }
  
  handleInputChange = (event) => {
    this.setState({ [event.target.name]: event.target.value });
  }
  
  render() {
    return (<div>
      <div>Foo: <input type='text' name='foo' value={this.state.foo} onChange={this.handleInputChange} /></div>
      <div>Bar: <input type='text' name='bar' value={this.state.bar} onChange={this.handleInputChange} /></div>
      <button disabled={this.hasChangedSinceInitialState()}>Submit</button>
    </div>);
  }
}

ReactDOM.render(<App foo='oldFoo' bar='oldBar' />, document.getElementById('root'));

<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.10/isEqual.js"></script>
<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>

Answer 2

如果我正确理解您的情况和代码，那么您只对验证组件状态中的某些变量感兴趣。

您可以通过向组件添加以下方法来实现所需的验证行为：

getCustomValidation() {

  // Extract a list for validation on only the state fields that are 
  // relevance to the form validation
  const fieldsToValidate = [
    "ppvLimit",
    "securityCode",
    "primaryPhone",
    "secondaryPhone",
    "email",
    "billingAddressLine1",
    "billingAddressLine2",
    "billingAddressCity",
    "billingAddressTerritoryCode",
    "billingAddressPostalCode",
    "contactAddressLine1",
    "contactAddressLine2",
    "contactAddressCity",
    "contactAddressTerritoryCode",
    "contactAddressPostalCode",
    "authorizedUser1",
    "authorizedUser2",
    "authorizedUser3",
    "authorizedUser4"
  ];

  // Iterate each field to check to determine if field is valid
  for(const fieldToValidate of fieldsToValidate) {

    // Extract value for current field
    const value = this.state[ fieldToValidate ]

    // If value is "truthy" then return valid (true)
    if( !!value ) {
      return true
    }
  }

  // If none of the validation fields are valid, return false
  return false;
}

要利用这一点，您可以在您的渲染方法中更新提交组件，如下所示：

<Button primary disabled={ !this.getCustomValidation() } type="submit">
{ loading ? <div><LoadingIcon size="lg" /> Saving...</div> : "Update" }
</Button>