今天我了解了更新程序功能,并且最好使用它们,因为React 16的光纤核心。
以下代码不起作用:
handleChange(e) {
this.setState((state, props) => ({
[e.target.name]: e.target.value
}));
}
以下是以某种方式工作的代码:
handleChange(e) {
this.setState({[e.target.name]: e.target.value});
}
我确实在构造函数中绑定了函数,如下所示:
this.handleChange = this.handleChange.bind(this);
我调用handleChange的输入如下所示:
<input
className="todo-input"
type="text"
name="newTodo"
value={this.state.newTodo}
onChange={this.handleChange}
/>
出于某种原因,在第二个版本中,React会抛出以下错误:
Uncaught TypeError: Cannot read property 'name' of null
有人可以向我解释一下我的代码有什么问题吗?
PS:我从this blogpost了解到更新程序功能。
答案 0 :(得分:2)
试试这个:
handleChange(e) {
e.persist();
this.setState((state, props) => ({
[e.target.name]: e.target.value
}));
}
或者这个:
handleChange(e) {
const value = e.target.value;
const name = e.target.name;
this.setState((state, props) => ({
[name]: value
}));
}