Question

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

请记住，在我的真实示例中，我有很多自定义逻辑（在此已跳过），这就是JS小提琴中的某些代码（可能）看起来很奇怪的原因。

===

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

但是-如果您自己单击复选框，则包装程序将被更新，但是复选框无法正确呈现。

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

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

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

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

为什么会这样？ ...而且我真的需要拥有一个实例方法-onItemClick-该实例方法可以同时被标签和复选框使用，这是发生一些常规问题的地方。

Answer 1

唯一阻止选中复选框的是e.preventDefault();函数中的onItemClick。尝试删除它，它将起作用。

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

为什么它不起作用？您的答案是here

Answer 2

为了得到您想要的结果，我已经更新了您的小提琴

https://jsfiddle.net/sabbin/kh4j1Ltp/12/

首先，您不应该在子组件中使用验证，否则e.preventDefault也在您的逻辑中引起了问题。同样要避免在渲染器内部使用箭头功能，您可以将eventHandler绑定到它自己的类上

LE： 我更改了示例中的复选框逻辑以使用生成器，但是您可以将它们一个一个地写

代替

{checkboxes.map((id)=>(
   <Checkbox
       handleCheckboxClick={this.handleCheckboxClick}
       selected={this.state.selectedCheckboxes.indexOf(id) > -1}
       id={id}
   />
 ))}

您可以直接写它们

<Checkbox
    handleCheckboxClick={this.handleCheckboxClick}
    selected={this.state.selectedCheckboxes.indexOf("item-two") > -1}
    id="item-two"
/>
<Checkbox
    handleCheckboxClick={this.handleCheckboxClick}
    selected={this.state.selectedCheckboxes.indexOf(item-one") > -1}
    id="item-one"
/>

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

2 个答案: