Question

当我使用此代码时：

 onChange = e => {
  const { name, value } = e.target;
     this.setState(currentState => ({
      tempInput: { ...currentState.tempInput, [name]: value }
    }));
  };

一切正常，但是当我这样做时：

 onChange = e => {
     this.setState(currentState => ({
      tempInput: { ...currentState.tempInput, [e.target.name]: e.target.value }
    }));
  };

我收到一个错误：TypeError：e.target为空，有什么区别？我错过了什么吗？

Answer 1

因为this.setState()是asynchronous。因此e在执行时变得不确定。

为缓解这种情况，您可以在e函数参数中破坏onChange，从而将name和value定义在onChange函数范围内：

 onChange = ({ target: { value, name } }) => {
     this.setState(currentState => ({
      tempInput: { ...currentState.tempInput, [name]: value }
    }));
  };

或者...您可以在执行e.target之前销毁this.setState()，这也将name和value定义在onChange功能范围内：< / p>

 onChange = e => {
     const { name, value } = e.target;
     this.setState(currentState => ({
      tempInput: { ...currentState.tempInput, [name]: value }
    }));
  };

为什么析构函数可以与事件一起使用，而没有事件却无法工作

1 个答案: