时间戳

首页 > 解决方案 > ReactJS - 如果单击处理程序是实例方法，则复选框不会重新呈现

reactjs - ReactJS - 如果单击处理程序是实例方法，则复选框不会重新呈现

问题描述

我在 JS Fiddle 上准备了一个演示来演示这个问题。

请记住，在我的真实示例中，我有很多自定义逻辑——我在这里跳过了——这就是为什么 JS Fiddle 中的某些部分代码（可能）看起来很奇怪。

===

问题 - 如果您单击标签 - 包装器和内部组件会得到更新和正确呈现。

但是 - 如果您单击复选框本身 - 然后包装器会更新，但复选框不会正确呈现。

https://jsfiddle.net/dbjfvsm2/5/

同时 - 如果我直接从复选框调用属性处理程序 - 那么一切都很好：

https://jsfiddle.net/dbjfvsm2/6/

我也尝试过onChange，但结果相同。

为什么会这样？...而且我真的需要那个实例方法——onItemClick标签和复选框都可以重用它，这是发生一些一般事情的地方。

标签： reactjs

解决方案

唯一阻止复选框被选中的是e.preventDefault();功能onItemClick。尝试删除它，它会工作。

onItemClick = (e, id) => {
    this.props.handleCheckboxClick(id);
}

为什么它不起作用？你的答案在这里

推荐阅读