在輸入onChange卡住期間反應改變父狀態

Question

我正在構建一個由至少50個輸入組成的巨大形式。 我在表單組件中編寫了一個函數，它將輸入的值保存到表單狀態：

父母的功能

saveToState(details) {
    const { company } = this.state;
    company[details.part][details.element] = details.value;
    this.setState({ company });
  }

通過兒童組件（輸入）

<FieldInput
  label="Name (as shown) *"
  part="information"
  element="displayName"
  saveToState={this.saveToState}
/>

這是輸入組件：

import React, { Component } from 'react';
export default class FieldInput extends Component {
  render() {
    const { label, part, element, saveToState } = this.props;
    return (
      <div className="field">
        <label>{label}</label>
        <div className="ui input">
          <input
            type="text"
            name={`${part}[${element}]`}
            onChange={(e) => saveToState({
              part,
              element,
              value: e.target.value
            })}
          />
        </div>
      </div>
    );
  }
}

結果每當我在輸入中鍵入內容時，它需要200-300ms才能真正顯示我在輸入中寫入的內容，狀態是立即獲得更新但是每當我鍵入一個字符時，我設置父表單的新狀態並更新它更新整個組件。 我發現它的唯一方法是在父組件中使用saveToState而不傳遞它。 但這需要1000行代碼，有什么方法嗎？ 謝謝！

Answer 1

有很多方法可以解決這個問題。 最簡單的一個是最快的一個是使用onBlur而不是onChange這樣，當你按下輸入但輸入失去焦點時， setState不會發生。

import React, { Component } from 'react';
export default class FieldInput extends Component {
  render() {
    const { label, part, element, saveToState } = this.props;
    return (
      <div className="field">
        <label>{label}</label>
        <div className="ui input">
          <input
            type="text"
            name={`${part}[${element}]`}
            onBlur={(e) => saveToState({
              part,
              element,
              value: e.target.value
            })}
          />
        </div>
      </div>
    );
  }
}