Reactjs 如何创建登录配置

我刚开始学习react我需要一些帮助， 创建登录页时，无法正确设置状态

如何在输入道具中设置onSubmit和onChange

从“React”导入React，{Component}；
类LoginInfo扩展了组件{
状态={
信息：{
用户名：“”，
密码：“”
}
};
updateInfo=e=>{
this.setState（{info:{[e.target.name]：e.target.value}）；
};
提交=e=>{
e、 预防默认值（）；
};
render（）{
console.log（this.state）；
返回(
用户名：
密码：
登录
);
}
}
导出默认登录信息；

---

我是否应该将输入更改为组件，然后在组件中放置道具？

我假设问题在于，当您填充一个输入并尝试更改另一个输入时，第一个输入将被清除，对吗

这是因为您在您的状态中创建了一个新的

info

对象。如果将

updateInfo

函数更改为：

updateInfo = e => {
   this.setState({ info: { ...this.state.info, [e.target.name]: e.target.value } });
};

---

我想问题是当你填写一个输入并试图更改另一个输入时，第一个输入被清除了，对吗

这是因为您在您的状态中创建了一个新的

info

对象。如果将

updateInfo

函数更改为：

updateInfo = e => {
   this.setState({ info: { ...this.state.info, [e.target.name]: e.target.value } });
};

---

抱歉，我必须更具体地说，我得到了这个错误：“警告：组件正在将文本类型的受控输入更改为非受控。输入元素不应从受控切换为非受控（或反之亦然）。在组件的生命周期内，决定使用受控或非受控输入元素。”数据是未定义的，因为如果您输入

登录

，您的

密码

不会被创建，这也是由于您更新状态的方式。因此，这两个字段中的一个变成了非受控输入。对不起，我必须更具体地说，我得到了这个错误：“警告：组件正在将文本类型的受控输入更改为非受控。输入元素不应从受控切换到非受控（或反之亦然）。决定在组件的生命周期内使用受控或非受控输入元素。”并且数据未定义。您之所以会得到此结果，是因为如果您输入

登录

，您的

密码也不会被创建，这同样是由于您更新状态的方式。因此，这两个字段中的一个成为不受控输入。