javascript - 为什么更改状态中的值不会触发 REACT 中输入元素的 onChange

Question

我有一个输入，其值由按钮元素更改。我需要一种方法来调用该输入的 onChange 。当值更改时，我必须进行一些验证。

我在 StackOverflow 上找到了一些答案，但他们正在使用调度，但他们没有正确解释或者我没有正确使用它。

但是当状态更新时，不会调用onChange。这是我现在所拥有的

<div className="input-group">
  <input type="text" className="form-control quantity-field text-center" onChange={(e) => this.handleChange(e)} value={this.state.quantity}/>
  <button onClick={(e) => this.handleIncDec(e)}>+</button>
</div>

  handleIncDec = (e) => {
    e.preventDefault()

    this.setState({
      quantity: this.state.quantity += 1
    })
  }

handleChange = e => {
    console.log(e.target.value);

    const re = /^[0-9\b]+$/;
    if (e.target.value === '' || re.test(e.target.value)) {
      this.setState({
        quantity: e.target.value
      })
    }
  };

输入的值按应有的方式正确更新，但永远不会调用 onChange ，除非我直接在该输入中更新值而不是使用按钮，这不是我想要的。

如果您需要任何其他信息，请告诉我，我会提供。

Answer 1

默认情况下，仅在用户输入时调用 onChange-event。大多数时候，您可以通过使用诸如 ComponentDidUpdate 或 React 中类似的生命周期方法来避免以编程方式触发 onChange 事件。在您的示例中，在我看来，您只需要验证来自两个不同来源的输入，因此我建议更简单的实现。

您能否创建一个可在 handleChange 和 handleInDec 上使用的验证函数？

您还应该避免使用 this.setState({Quantity: this.state.quantity += 1}) 根据先前的状态更新状态，因为您不能保证状态始终会更新(请记住，setState 是异步的)。而是使用 setState 的返回值 guarantees updated state-values

class Test extends React.Component {
  constructor() {
    super();

    this.state = {
      quantity: 0
    };
  }

  handleIncDec = e => {
    e.preventDefault();

    this.setState(prevState => {
      var newQuantity = prevState.quantity + 1;
      if (this.isValidInputData(newQuantity)) {
        return {
          quantity: newQuantity
        };
      }
    });
  };

  handleChange = e => {
    if (this.isValidInputData(e.target.value)) {
      this.setState({
        quantity: e.target.value
      });
    }
  };

  isValidInputData = newQuantity => {
    const re = /^[0-9\b]+$/;
    return newQuantity === "" || re.test(newQuantity);
  };

  render() {
    return (
      <div className="input-group">
        <input
          type="text"
          className="form-control quantity-field text-center"
          onChange={this.handleChange}
          value={this.state.quantity}
        />
        <button onClick={this.handleIncDec}>+</button>
      </div>
    );
  }
}

ReactDOM.render(<Test />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>