Reactjs 如何使用语义UI反应复选框切换？

我试图使用语义UI反应来布局。以下是我在onChange中遇到的问题的示例代码。我可以选择单击切换，但每次刷新时都会重置

导入{
复选框
}来自“语义用户界面反应”
onChangeInput（事件）{
让name=event.target.name
让值=event.target.value
让talent=this.state.newalentprofile
人才[姓名]=价值
这是我的国家({
NewAlentProfile：人才
})
}
下面的代码不起作用，但上面的代码在我进行更改时起作用，并将其保存到数据库中

---

我假设您的

这个.onChangeInput处理数据库更新

语义ui react为复选框提供了一个属性
checked

您应该在代码中有一个状态{checked:false}，然后在检索数据库记录后
this.setState
componentDidMount中的任何内容

将
this.state.checked
传递到复选框的
checked
属性中。
您的代码表明您希望
事件.target
是复选框元素，但它不是。如果在浏览器中检查变量
event.target
，您会注意到它指向
标签
元素，而不是复选框本身。因此，我猜测您的
event.target.value
和
event.target.label
的计算结果为
null
，导致您的其余代码无法按预期的方式运行

有很多方法可以解决这个问题。一种方法是为组件设置状态变量，以表示复选框的状态：

class TheComponentThatContainsMyCheckbox extends Component {
    state = {
     textValue: null,
     willingToRelocate: true
    }
...

然后，您可以创建一个处理程序，在选中时切换此状态：

toggleCheckBox = () => {
  const willingToRelocate = !(this.state.willingToRelocate);
  this.setState({willingToRelocate}); 
  // Note: if you have other logic here that depends on your newly updated state, you should add in a callback function to setState, since setState is asynchronous
}

请注意，我在这里使用的是箭头语法，它会自动为我绑定
这个
。然后，将其连接到语义UI复选框的
onChange
事件：


您现在可以使用您的
this.willingToRelocate
状态来决定其他应用程序逻辑，使用您喜欢的任何状态管理模式（状态容器/存储，如Redux、React Context等）上下传递它。
onChangeCheckbox=（evt、数据）=>{
让已检查=data.checked
console.log（已选中）
}
this.onChangeCheckbox（evt，数据）}
/>

这应该能奏效

  onChangeCheckbox = (evt, data) => {
    let checked = data.checked
    console.log(checked)
  }


 <Checkbox toggle label='Running discounted price?' 
  onClick={(evt, data)=>this.onChangeCheckbox(evt, data)}
   />