如何将 "event" 对象传递给 "this.setState()" 的功能版本？

Question

所以我使用 this.setState() 的函数形式，你传递一个 returns 一个对象的函数。

但是当我尝试在输入上绑定 onChange 并执行此操作时...

onInputChange = event => {
    this.setState(() => ({
        ...this.state,
        [event.target.name]: event.target.value
    }));
};

它抛出一个错误说 Cannot read property 'name' of null 显然问题出在事件对象中，那么我如何将事件对象传递给 this.setState() ？

我试过了，但没用...

onInputChange = event => {
    this.setState((prevState, event) => ({
        ...this.state,
        [event.target.name]: event.target.value,
    }));
};

然而，唯一对我有用的就是这样做......

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

但我怀疑这是打点的正确方法。

Answer 1

像这样的东西应该可以工作

onInputChange = event => {
    event.persist();
    this.setState(() => ({
        ...this.state,
        [event.target.name]: event.target.value
    }));
};

虽然我会说我最喜欢你最后的尝试。

这里有关于 React 中合成器事件的文档 -> https://reactjs.org/docs/events.html

此外，函数式 setState 签名接收组件的当前状态和下一个道具作为参数，而不是您拥有的 (prevState, event) => {。

如何将 "event" 对象传递给 "this.setState()" 的功能版本？

How to pass the "event" object to the functional version of "this.setState()"?

javascript

setstate

reactjs