React onChange 不会根据输入更改进行更新

Question

我正在尝试在我的输入上使用 onChange 来更新我的状态。目前，当我按下回车键时 onChange on 触发。我将如何在不按回车键的情况下更新我的状态？

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

  inputFigureRow(title, amount, key) {
    return (
      <div style={styles.benchMarkRow}>
        <div style={styles.titleRow}>{title}</div>
        <input
          key={key}
          style={styles.inputValueLeft}
          value={amount}
          onChange={e => this.onChange(e, key)}
        />
        <div style={styles.valueRight}>${amount}</div>
      </div>
    );
  }

  renderContent() {
    return (
      <div style={styles.root}>
          <div style={styles.benchMarkContainer}>
            {this.titleRow()}
            {this.inputFigureRow(
              "Sales Target",
              this.state.salesBenchMarkTarget,
              "salesBenchMarkTarget"
            )}
      </div>
    );
  }

  render({}, state) {
    return this.renderContent(state);
  }

Answer 1

在您的输入上使用 onKeyDown 处理程序而不是 onChange。如果您需要等待最后一个字符，则需要引入去抖动间隔，例如 https://blog.flowandform.agency/debounce-in-react-fc5ed305a0e8

React onChange 不会根据输入更改进行更新

React onChange is not updating on input change

reactjs

react-state-management