Javascript 如何避免立即改变状态？

在我的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>
  );

---

现在，

surveyState

在您每次写入某些内容时都会更改，但是您可以使用另一个通用按钮跳过提交表单，但状态已被

onInputChange

更改，并将显示在下一个状态视图中，该视图由

跳过

按钮触发。如何避免这种情况

如果您的

surveyState

中有两个属性，那么您需要更新这两个属性，如

value

和

change

，如果您不愿意，则将它们与

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

const surveyState = {
    name = this.name,
    change = this.change
}
this.setState({surveyState })

---

将其保存到临时状态对象

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

在提交时将其保存到真实状态，在跳过时，您无需执行任何操作或只需清除临时状态：

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

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

---

为什么不在表单提交时更新您的状态，而不是更改输入？我确信这将是一个很好的方法，但是，由于某些原因，我在下一个视图中获得了有价值的输入：/因为某些原因，

tempState

仍然是下一个视图中的

input

字段的值…在这种情况下，清除tempState-

this.setState（{tempState:{name:''，change:''}}）

在需要（跳过或提交）Dominic的地方，听起来不错，但在下次渲染时状态会发生变化，而不是在我需要的位置。而

这个.state

对我不起作用。在最后一次我使用了

document.getElementById（“clearMe”）.reset（）tempState

。谢谢

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

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