我正在 React 中使用表单并面临这个奇怪的问题。
这就是我的组件类的样子 -
export default class Home extends React.Component {
constructor(props) {
super(props);
this.state = {
username: 'Bla'
};
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
this.setState({[event.target.name]: event.target.value})
}
render() {
return (
<div>
<form onChange={this.handleChange}>
<label> Name: <input type="text" value={this.state.username} name="username" /> </label>
<input type="submit" value="Submit" />
</form>
</div>
);
}
}
这就是渲染页面在浏览器中的外观。
我能够更新/更改文本框中的文本。
现在我稍微调整一下我的组件类,基本上我更改了 this.state
对象并相应地更新了 HTML 输入元素。
这些是已完成的更改-
this.state = {
formEle: {
username: 'Bla'
}
};
<label> Name: <input type="text" value={this.state.formEle.username} name="username" /> </label>
进行这两项更改后,当我在浏览器中渲染页面时,一切都相同,只是我无法更新/更改文本框中的内容。
我的预感是 this.setState
函数一定存在一些问题,但是当我打印 event.target.name
和 event 的值时。 target.value
我得到了预期的值。不确定到底出了什么问题。
最佳答案
您无法再更新输入框的原因是您不再设置正确的状态变量。
如果您将 handleChange
事件监听器更改为如下所示,则内容应该再次开始工作:
handleChange(event) {
this.setState({
formEle: {
...this.state.formEle,
[event.target.name]: event.target.value,
},
});
}
您指定要从 this.state.formEle.username 读取状态,因此您需要确保设置状态树的特定部分。
希望这对您有所帮助 - 祝您编码愉快!
关于javascript - setState 不适用于 ReactJs 中 this.state 内的对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49336303/