无法读取空输入字段的属性“值”？

Question

每当我输入input字段时，我都会收到以下错误： -

无法读取null的属性“value”

我有一个表单，当我尝试键入任何错误时，我有一个input字段搜索值。

Here是我的代码。

关于这个功能的问题

handleInputFieldChange = (event, name) => {
    this.setState(preState => ({
      ...preState,
      form: {
        ...preState.form,
        [name]: event.target.value
      }
    }));
  };

Answer 1

React lib本身有一个警告，它基本上指导你如何解决这个问题。

警告：出于性能原因，将重复使用此合成事件。如果您看到这个，那么您将在已发布/无效的合成事件中访问target属性。这被设置为null。如果您必须保留原始合成事件，请使用event.persist()

所以修复是在下面的局部变量中获取目标对象的引用。

handleInputFieldChange = (event, name) => {
    const { target } = event;
    this.setState(preState => ({
      ...preState,
      form: {
        ...preState.form,
        [name]: target.value
      }
    }));
  };

这只发生在使用setState方法的updater函数时。他们要求使用event.persist()，但在我的应用程序中，只需使用target对象的引用即可在更新函数中使用它，它可以100％运行。

查看Event Pooling的文档

SyntheticEvent汇集在一起​​。这意味着将重用SyntheticEvent对象，并且在调用事件回调后，所有属性都将无效。这是出于性能原因。因此，您无法以异步方式访问事件。

如果要以异步方式访问事件属性，则应在事件上调用event.persist（），这将从池中删除合成事件，并允许用户代码保留对事件的引用。