Question

我有一个父容器，该容器调用了基于类的react组件的子组件（因为语义ui react文档都是使用基于类的组件编写的）。子组件具有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返回给父表单，它还会显示该复选框为false。

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

我几乎想从not的{{1}}中删除prev.state，但是我更想理解为什么会这样。

奖金问题：如何查询功能组件中的setState状态checkbox？

Answer 1

将该功能作为道具传递给孩子

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}
     />
    )
  }

语义UI React Checkbox状态不起作用

1 个答案: