javascript - 警告 : This synthetic event is reused for performance reasons happening with <input type ="checkbox"/>

Question

我一直在为一个类开发一个简单的 react-redux todo 示例，每次我选中和取消选中复选框输入时，我都遇到了控制台中显示的几条警告消息。

您可以在下图中看到警告。

我还通过谷歌搜索警告消息，但找不到任何有效的解决方案。此外，令我注意到的是，它看起来像是在尝试访问 native 事件和 DOM 元素的每个属性。

这是具有输入复选框的展示组件的代码

class TodoItem extends React.Component {
  state = {
    isChecked: false
  };
  handleCheckbox = () => {
    this.setState({
      isChecked: !this.state.isChecked
    });
  };
  render() {
    const { todos, onItemClick } = this.props;
    const { isChecked } = this.state;
    return (
      <div>
        <ul>
          {todos.map((todo, id) => {
            return (
              <li key={id} onClick={onItemClick}>
                <input
                  onChange={this.handleCheckbox}
                  type="checkbox"
                  checked={isChecked}
                />
                <label>
                  <span />
                  {todo.textInput}
                </label>
              </li>
            );
          })}
        </ul>
      </div>
    );
  }
}

export default TodoItem;

我也在 CodeSandbox 上上传了示例:https://codesandbox.io/s/k0mlxk1yqv

如果您想重现此错误，您需要将一个项目添加到待办事项列表中，然后单击复选框以选中和取消选中几次。

如果有人知道为什么这个警告标志不断出现以及如何禁用它们，我将非常感谢您的意见 :)

Answer 1

发生这种情况是因为在异步上下文中使用了隐式传递给 onItemClick 的 event。
正如 Andre Lemay 所说，您应该将您的需求分配给局部变量并引用它们。

在我的例子中，我有这段代码:

handleInput = e => { // <-- e = synthetic event
  this.setState(state => ({ // <-- asynchronous call
    data: {
      ...state.data,
      [e.target.name]: e.target.value // <-- this was causing the warnings (e.target is in an asynchronous context)
    }
  }));
};

然后我改成:

handleInput = e => {
  const { name, value } = e.target; // <-- moved outside asynchronous context

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