javascript - 在输入 onChange 期间 react 改变父状态被卡住

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-300 毫秒才能真正显示我在输入中写入的内容，状态会立即更新，但每当我键入字符时，我都会设置父表单的新状态，并且更新它会更新整个组件。我发现的唯一方法是在父组件中使用 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>
    );
  }
}