Question

在我的ReactJS应用中，我提交了带有一个输入字段的表单，希望保持通用性：

if (questions[this.state.currentDialog].entry)
  return (
    <form onSubmit={this.onFormSubmit}>
      <label>{toWrite.label}</label>
      {' '}
      <input
        name={toWrite.name}
        onChange={this.onInputChange}
      />
      {' '}
      <input type='submit' value='Send it >'/>
    </form>
  );

我的onInputChange看起来像这样：

onInputChange = (evt) => {
  if (evt.target.name == 'name') {
    this.setState({
      surveyState: {
        name: evt.target.value,
        change: this.state.surveyState.change,
      }
    });
  };
  if (evt.target.name == 'change') {
    this.setState({
      surveyState: {
        name: this.state.surveyState.name,
        change: evt.target.value,
      }
    });
  };
};

现在surveyState在每次您要写一些东西时都会更改，但是您可以跳过使用另一个通用按钮提交表单，但是状态已经被onInputChange更改了，并且在下一个状态视图中显示，该视图由skip按钮触发。如何避免这种情况？

Answer 1

将其保存到临时状态对象。

onInputChange = (evt) => {
  if (evt.target.name === 'name') {
    this.setState({
      tempState: {
        name: evt.target.value,
      }
    });
  };
  if (evt.target.name === 'change') {
    this.setState({
      tempState: {
        change: evt.target.value,
      }
    });
  };
};

提交后，将其保存为真实的，跳过时您无需执行任何操作或仅清除tempState：

onFormSubmit = (evt) => {
  evt.preventDefault();

  this.setState(state => ({
    surveyState: {
      ...state.surveyState,
      ...state.tempState,
    }
  }));
}

Answer 2

如果您的surveyState中有两个属性，那么如果您不希望这样做，则需要同时更新value和change，然后将它们与{{1 }}并声明为单独的状态。

我所做的是，使用了surveyState扩展运算符，它将使您的对象保持原样，然后传递新的属性值。如果不存在，它将在此处添加新的属性值，否则将对其进行更新。

这将执行您尝试实现的功能

...

然后onInputChange = (evt) => { if (evt.target.name == 'name') { this.name = evt.target.value }; if (evt.target.name == 'change') { this.change = evt.target.value }; }; Using `this` variable only to avoid re-rendering but onlt if you are using this state value for manupulation.

onFormSubmit

如何避免onChange马上改变状态？

2 个答案: