Reactjs 处理多个表单输入

当state对象嵌套时，如何编写一个setState方法来更新多个输入元素的值，如下所示

注意：状态不应发生突变

当状态未嵌套时，我们可以按如下方式执行：

this.setState({ [event.target.name]: event.target.value });

但是当state对象嵌套时，我们该如何做呢

class FormContainer extends Component {

  constructor () {

  this.state = {
      formControls: {
          email: {
            value: ''
          },
          user: {
            value: ''
          },
          password: {
            value: ''
          }
      }
  }

}

 changeHandler = event => {

  const name = event.target.name;
  const value = event.target.value;

  this.setState({
     //code here


  });
}


  render() {
     return (
      <form>

          <input type="email" 
                 name="email" 
                 value={this.state.formControls.email.value} 
                 onChange={this.changeHandler} 
          />

          <input type="text" 
                 name="user" 
                 value={this.state.formControls.name.value} 
                 onChange={this.changeHandler} 
          />

          <input type="password" 
                 name="password" 
                 value={this.state.formControls.password.value} 
                 onChange={this.changeHandler} 
          />

       </form>      
     );
   }

}

类FormContainer扩展组件{
构造函数（）{
此.state={
表单控件：{
电邮：{
值：“”
},
用户：{
值：“”
},
密码：{
值：“”
}
}
}
}
changeHandler=事件=>{
const name=event.target.name；
常量值=event.target.value；
这是我的国家({
//代码在这里
});
}
render（）{
返回(
);
}
}

使用上一个状态和排列

---

有多种方法可以更改嵌套状态对象

您可以使用immutablejs来

deepClone

您可以使用es5提供的遗留Object.assign（）

spead操作符帮助我们浅复制对象，但深度克隆 没用

parse（JSON.stringify（this.state））并对必要的 嵌套对象

代码：

---

您混淆了电子邮件和姓名，下面是一个工作示例：

类组件扩展React.Component{
状态={
表单控件：{
电邮：{
值：“”，
},
姓名：{
值：“”，
},
密码：{
值：“”，
},
},
};
changeHandler=事件=>{
const name=event.target.name；
常量值=event.target.value；
这是我的国家({
…此.state，//复制状态
formControls:{//set state.formControls
…this.state.formControls，//复制sate.formControls
[名称]：{//set state.formControls[名称]
…this.state.formControls[name]，//复制state.formControls[name]
值，//设置状态。formControls[name]。值
},
},
});
};
render（）{
返回(
);
}
}
//渲染应用程序
ReactDOM.render(
,
document.getElementById（'root'））
);

这是否回答了您的问题？你还在变异，Object.assign只是一个浅拷贝。你能简单地解释一下这里发生了什么吗，formControls:{…this.state.formControls，[名称]：value，}我们需要…this.state.formControls吗？@Nag你想把文本值放在
state.formControls
中，所以是的，你需要复制嵌套值。我编写了一个函数来设置嵌套状态值。设置状态时，我用一些注释更新了答案。@如果使用Nag，代码看起来会更干净：
this.setState（set（this.state，['formControls'，name]，（）=>value））
。设置嵌套值而不进行变异是一个混乱的代码。结果不是嵌套的，我得到的输出是，Object{email:：abc@gmail.com，名称：“abc”，密码：“xyz”}
this.setState((prevState) => ({
  ...prevState,
  [name]: value,
}));

changeHandler = event => {
          const inputName = event.target.name;
          const inputValue = event.target.value;
             let updatedFormState = Object.assign({}, this.state);
             updatedFormState.form[inputName].value = inputValue;
             this.setState(updatedFormState);
        }