Javascript 语义UI复选框模态交互 总结

注：我将使用[Component Name]引用组件

出现以下情况时，[复选框]无法正确更新： 在模态中使用

繁殖 我已经在CodeSandbox上写了一个关于这个问题的例子

预期结果 单击[模式]时，[复选框]内的[复选框]将更新

实际结果 在[Modal]内切换[Checkbox]时，[Modal]外的[Checkbox]会更新

请注意，[Checkbox]和[Input]在主页上如何工作良好，但当打开[Modal]时，[Modal]中的[Checkbox]不会切换。无论[Input]在何处，它仍然工作

语义用户界面版本

---

^0.88.2

对于

表单的两个实例，您似乎拥有相同的
id
道具。复选框

。这是导致模态内部的复选框指向模态外部的复选框的原因。您可以通过道具将复选框的唯一

id

传递到

CheckBoxModal

，然后传递到

Form.checkbox

，或者删除

id

道具并让库句柄分配id

{
console.log（someModalObject）；
setCheckBoxEnabled（data.checked）；
}}
/>

解决方案1：

{
console.log（someModalObject）；
setCheckBoxEnabled（data.checked）；
}}
/>

解决方案2：

{
console.log（someModalObject）；
setCheckBoxEnabled（data.checked）；
}}
/>

哇，这很有道理。我测试了它，它似乎工作。您知道为什么[Input]没有镜像此行为，因为该组件的ID仍然相同吗？