小编Ray*_*mi 的帖子

警告:由于<input type ="checkbox"/>发生的性能原因,会重复使用此合成事件

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

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

警告错误图像

我也在谷歌搜索警告信息,但找不到任何有效的解决方案.另外,我的注意力是看起来它试图访问本机事件和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;
Run Code Online (Sandbox Code Playgroud)

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

如果要复制此错误,则需要将项目添加到待办事项列表,然后单击复选框以选中并取消选中几次.

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

javascript frontend reactjs react-redux

16
推荐指数
4
解决办法
1万
查看次数

标签 统计

frontend ×1

javascript ×1

react-redux ×1

reactjs ×1