在输入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>
    );
  }
}