Question

我是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} />
        ...
       )
   }      
}

https://codepen.io/anon/pen/YYQgNv?editors=0010

Answer 1

您需要更改handleChange声明：

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

当您编写handleChange = (e) => {...} ~~时，它会将函数的this指针绑定到您的组件，以便您能够访问setState~~ ，如下所示： @ Li357，它根本没有绑定，相反它创建了一个类的属性，它是一个不绑定this的箭头函数，捕获this值周围范围，班级。

更新

有人指出，使用箭头函数作为类属性是一个实验性功能，因此在组件的this.handleChange = this.handleChange.bind(this)中使用constructor会更安全。我得到了使用此代码的示例：

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

我不完全确定它为什么会这样做，我猜它与setState是异步的事实有关，而react在自己SyntheticEvent中包装事件其中will be reused and all properties will be nullified after the event callback has been invoked（见react docs）。因此，如果您将target的原始引用存储在setState之外，则它将在setState内得到范围并使用。

以下是codesandbox上的一个工作示例。

更新2：

根据react docs，无法以异步方式访问反应SyntheticEvent。解决这个问题的一种方法是调用event.persist()，这将删除包装器，但这可能不是一个好主意，因为SyntheticEvent是浏览器本机事件的跨浏览器包装，这确保了事件在所有浏览器中的工作方式相同。

嵌套状态对象中的回调

1 个答案: