>

입력시 onChange로 상태를 업데이트하려고합니다. 현재 Enter를 누르면 onChange on이 트리거됩니다. Enter 키를 누르지 않아도 상태를 업데이트하려면 어떻게합니까?

 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);
  }


  • 답변 # 1

    onKeyDown 사용   onChange 대신 입력 핸들러 . 마지막 문자를 기다려야하는 경우 디 바운스 간격을 소개해야합니다 (예 : https://blog.flowandform.agency/debounce-in-react-fc5ed305a0e8

    ).

관련 자료

  • 이전 c# - Javascript 및 ASPNET을 사용하여 ASP 텍스트 상자의 유효성 검사가 작동하지 않습니다
  • 다음 라 라벨에서 SMS를 보내는 방법