时间戳

首页 > 解决方案 > Semantic-UI React Checkbox 状态不起作用

javascript - Semantic-UI React Checkbox 状态不起作用

问题描述

我有一个父容器，它调用基于类的反应组件子项（因为语义 UI 反应文档都是用基于类的组件编写的）。子组件有一个Form.Field：

<Form.Field 
    control={Checkbox} 
    label={{children: 'cardreader'}}
    checked = {this.state.cardReaderChecked}                
    onChange={this.cardReaderToggleHandler}
/>

我有一个state：

state = {
    cardReaderChecked: false,     
}

和一个cardReaderToggleHandler：

cardReaderToggleHandler = () => {
    console.log(this.state.cardReaderChecked);
    this.setState((prevState, props) => ({
        cardReaderChecked : !prevState.cardReaderChecked
    }))
console.log(this.state.cardReaderChecked);
}

我试过切换，this.state.cardReaderChecked但我发现很多参考和文档都推荐这种方法，prevState以避免状态更新的延迟。

但是，必须存在逻辑错误，因为它不起作用。如果我刷新页面，checkbox则清除为this.state.cardReaderChecked.

我第一次单击checkbox它时，它会带有勾号，并且我的this.state.cardReaderChecked更新是true（根据我在 Chrome 中值得信赖的 React 工具）。但是，两个console.log打印输出都给了我一个false，如果我将我的state回传给父表单，它也表明该复选框是错误的。

每次后续单击都会切换，但勾选checkbox显示true状态但将 a 传递false给父表单（即console.log当前所在的位置），反之亦然，未勾选checkbox传递回 a true。

我几乎想not从prev.state中删除setState，但我更愿意了解为什么会发生这种情况。

额外问题：如何查询功能组件中的checkbox状态？checked

标签： javascriptreactjsformssemantic-ui

解决方案

将函数作为道具传递给孩子

class Parent extends Component {

  state = {
    cardReaderChecked: false,
  }

  cardReaderToggleHandler = () => {

    this.setState((prevState, props) => ({
      cardReaderChecked : !prevState.cardReaderChecked
    }), () => console.log(this.state.cardReaderChecked))
  }
  ....

  render () {
    return (
     ....
     <Form.Field 
       control={Checkbox} 
       label={{children: 'cardreader'}}
       checked = {this.state.cardReaderChecked}                
       onChange={this.cardReaderToggleHandler}
     />
    )
  }

推荐阅读