Javascript 嵌套状态对象中的回调

我对JS还相当陌生，在理解如何正确实现React中传递给setState的回调时遇到了一些麻烦，因为它是一个受控输入。以下代码是我目前掌握的代码：

class App extends React.Component {
    ...
        this.state = {
            properties: {
                width: '',
                height: ''
            }
         this.handleChange = this.handleChange.bind(this); //edit 1
    }

   handleChange(e){
     this.setState(() => ({ properties[e.target.name]: e.target.value })) //edit 2  
   }

   render(){
       return(
         <input
           type="text"
           value={this.state.properties.width}
           name="width"
           onChange={this.handleChange} />
        ...
       )
   }      
}

您需要更改handleChange声明：

class App extends React.Component {
    ...
   handleChange = (e) => {
     this.setState({ properties[e.target.name]: e.target.value })  
   }
    ...
}

当您编写handleChange=e=>{…}时，它会将函数的这个指针绑定到您的组件，这样您就可以访问@Li357所指出的setState，它根本不绑定，相反，它会创建一个类的属性，该类是一个不绑定它的arrow函数，捕获周围范围（类）的这个值

更新：

已经指出，使用箭头函数作为类属性是一种实验性功能，因此在组件的构造函数中使用this.handleChange=this.handleChange.bindthis更安全。 我得到了使用此代码的示例：

handleChange(event) {
    const target = event.target;
    this.setState((prevState) => ({
        properties: {...prevState.properties, ...{ [target.name]: target.value } }
    })
  );
}

我不完全确定它为什么会这样做，我猜这与setState是异步的，react将事件包装在它自己的SyntheticEvent中这一事实有关，它将被重用，并且在调用事件回调后，所有属性都将为null。请参阅。因此，如果您将对目标的原始引用存储在setState之外，它将在setState内部得到作用域并使用

下面是一个关于的工作示例

更新2：

---

根据，不能以异步方式访问事件。处理此问题的一种方法是调用event.persist，它将删除包装器，但这可能不是一个好主意，因为SyntheticEvent是围绕浏览器的本机事件的跨浏览器包装器，它确保事件在所有浏览器中都相同地工作。

i可能是错误的，但我相信这个功能需要一个transpiler插件，因为它在es2015中不是标准的。@lluisrojass，是的，你是对的，它不是es6的一部分。我没有意识到这一点，因为我通常使用阶段2巴别塔预设，其中包括这一功能。谢谢你指出@margaretkru我已经更新了画笔，但是绑定似乎不能使它工作。@Li357，请您指出一些源代码，解释箭头函数在用作类属性时是如何工作的？我似乎找不到任何关于这个指针会发生什么的书面解释。@margaretkru你可以用它来测试。Arrow函数不绑定它。这无法解决问题。您似乎错过了在构造函数this.handleChange=this.handleChange.bindthis中绑定handleChange方法。确实，我忘记了它，但它并不能解决问题，正如@Iluisrojass所说的那样。@Li357，它不是您链接的问题的副本。这个问题与react SyntheticEvent以及在调用事件回调后它们被重用和无效这一事实有关，这会导致setState异步出现问题。@margaretkru是的，我将取消重复状态，尽管链接的问题解释了部分问题。