Javascript React-为每次更改修改表单对象。不管怎样，我们可以用更好的方式来做吗_Javascript_Reactjs

Javascript React-为每次更改修改表单对象。不管怎样，我们可以用更好的方式来做吗

javascript reactjs

Javascript React-为每次更改修改表单对象。不管怎样，我们可以用更好的方式来做吗,javascript,reactjs,Javascript,Reactjs,我添加了简单的表格以供参考。在上面的内容中，只要表单字段更改，就会调用handleChange方法，并且在该表单中，对象会根据字段更改和设置更新为state对象我想知道我们是否可以避免每个字段的文本更改对象的突变，或者是否有其他更好的方法来解决相同的问题。我还想知道对象变异对性能的影响，因为我在这里提到了几个字段，在我的原始项目中，我正在工作的每个表单至少包含15到20个字段添加了相同的工作模块。请帮帮我。提前感谢如果您不想更新每个角色更改，可以使用onBlur事件因此，在离开字段时，

我添加了简单的表格以供参考。在上面的内容中，只要表单字段更改，就会调用handleChange方法，并且在该表单中，对象会根据字段更改和设置更新为state对象

我想知道我们是否可以避免每个字段的文本更改对象的突变，或者是否有其他更好的方法来解决相同的问题。我还想知道对象变异对性能的影响，因为我在这里提到了几个字段，在我的原始项目中，我正在工作的每个表单至少包含15到20个字段

添加了相同的工作模块。

请帮帮我。提前感谢

如果您不想更新每个角色更改，可以使用onBlur事件

因此，在离开字段时，只有您可以更新状态。

如果您不想更新每个字符更改，可以使用onBlur事件

因此，在离开字段时，只有您可以更新状态。

“…”扩展运算符生成对象的浅拷贝

 onBlur={event => { this.handleChange(event, 'name'); }}

}“…”扩展运算符生成对象的浅拷贝

 onBlur={event => { this.handleChange(event, 'name'); }}

}

对于React的表单，有两种方法

1非受控组件，基本上使用REF并从DOM获取值。请查看官方文档以了解更多详细信息或

2受控组件利用状态和从React状态获取/处理值请查看官方文档了解更多详细信息

对于controlled components=>React，正如官方文件所建议的，状态是唯一的真实来源，这意味着，您需要提供方法来处理用户提供输入时的状态更改

使用uncontrolled components=>而不是在每次更改时更新状态，您可以在onSubmit方法中获取值并在提交之前处理它们。由于不需要更新状态，因此不需要额外的函数来处理状态更改

对于您寻求更好的方式来处理事情和避免突变，这实际上取决于您的用例，但官方文档表明

在大多数情况下，我们建议使用受控组件来实现形式。在受控组件中，表单数据由React处理组成部分

当涉及到变异对象时，确实变异是不好的，但有一些方法可以避免在状态更改期间发生变异。正如@mhkit已经建议的，您可以使用spread操作符创建新的对象浅层副本，这意味着它只复制值，或者您可以使用object.assign方法

假设您具有以下状态：

handleChange(evt, field) { 
let form = {...this.state.form};  //object spread notation
form[field] = evt.value;
console.log('change triggered'); 
this.setState({ form: form });

当用户提供电子邮件时，基本上需要更新电子邮件字段，在这种情况下，在handleChangeEmail方法中，您可以执行以下操作

state = {
 form: {
  email: '',
  name: '',
  lastName: '',
  }
}

所以用这个方法，我基本上做的是， 1我利用functional setState并通过ES6对象解构提取表单的当前值，然后我说，好的，我的状态中的新表单对象将具有前表单具有的所有现有字段，但是，电子邮件字段将具有基于新输入用户提供的新值

通过这种方式，我们没有改变表单对象，而是创建了它的浅层副本，其中一些值完全相同，但一些值会更新。因此，我们防止突变

当涉及到React的形式时，有两种方法