警告:出于性能原因，使用 <input type="checkbox" 会重用此合成事件./> [英] Warning: This synthetic event is reused for performance reasons happening with <input type="checkbox" />

问题描述

我一直在为一个类编写一个简单的 react-redux todo 示例，每次我选中和取消选中复选框输入时，都会在控制台中看到几条警告消息.

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

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

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

class TodoItem 扩展 React.Component {状态 = {isChecked: 假};handleCheckbox = () =>{this.setState({isChecked: !this.state.isChecked});};使成为() {const { todos, onItemClick } = this.props;const { isChecked } = this.state;返回 (<div><ul>{todos.map((todo, id) => {返回 (<li key={id} onClick={onItemClick}><输入onChange={this.handleCheckbox}类型=复选框"已检查={isChecked}/><标签><跨度/>{todo.textInput});})}

);}}导出默认 TodoItem；

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

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

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

解决方案

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

就我而言，我有这个代码:

handleInput = e =>{//<-- e = 合成事件this.setState(state => ({//<-- 异步调用数据: {...状态.数据，[e.target.name]: e.target.value//<-- 这导致了警告(e.target 在异步上下文中)}}));};

然后我把它改成:

handleInput = e =>{const { name, value } = e.target;//<-- 移出异步上下文this.setState(state => ({数据: {...状态.数据，[名称]:值}}));};

I've been working on a simple react-redux todo example for a class and I came across several warning messages that show in the console everytime I check and uncheck a checkbox input.

You can see the warnings in the following images.

I also did a google search for the warning message but couldn't find any solution that works. Also, what stroke my attention was that it looks like it was trying to access every property of the native event, and DOM element.

This is the code for the presentational component that has the input checkbox

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;

I uploaded the example on CodeSandbox as well: https://codesandbox.io/s/k0mlxk1yqv

If you want to replicate this error you need to add an Item to the todo List and click the checkbox to check and uncheck a couple of times.

If anyone has any idea why this warning signs keep appearing and how to disable them I would appreciate your input very much :)

解决方案

This happened because the event implicitly passed to onItemClick is used in an asynchronous context.
As Andre Lemay said, you should assign your needs to local variables and reference them.

In my case, I had this code:

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)
    }
  }));
};

Then I changed it to:

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

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

这篇关于警告:出于性能原因，使用 <input type="checkbox" 会重用此合成事件./>的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！