Question

我在这里遇到一个非常奇怪的问题。我使用react-toggle依赖只返回某些输入的true / false值。

基本上我正在做的是我使用react-toggle输入的回调函数来更新我的反应状态的值。由于某种原因，它只会更新已更改的最后一个输入，而其他输入将变为false。

以下是我的代码的外观：

RandomComponent.js

constructor(props){
  super(props);
  this.state={
    testA:false,
    testB:false,
    testC:false,
    testD:false,
  }
}
updateCheckValue(title){
  if(title === 'TestA'){
    this.setState({
      testA: !this.state.testA
    }, ()=>{
      console.log(this.state)
    })
  }
  if(title === 'TestB'){
    this.setState({
      testB: !this.state.testB
    }, ()=>{
      console.log(this.state)
    })
  }
  if(title === 'TestC'){
    this.setState({
      testC: !this.state.testC
    }, ()=>{
      console.log(this.state)
    })
  }
  if(title === 'TestD'){
    this.setState({
      testD: !this.state.testD
    }, ()=>{
      console.log(this.state)
    })
  }
}

render(){
  return(
    <Row className={styles.container}>
        <Col sm={1} md={1} lg={1}></Col>
        <Col sm={2} md={2} lg={2}>
          <Toggle
            onChange={this.updateCheckValue.bind(this, this.props.title)}
            icons={false} />
        </Col>
        <Col sm={8} md={8} lg={8}>
          <h4>{this.props.title}</h4>          
        </Col>
        <Col sm={1} md={1} lg={1}></Col>          
    </Row>
  )
}

ToggleComponent.js

List<Integer> list = Arrays.asList(5,8,3,6);

List<Integer> newList = list.stream().sorted().collect(Collectors.toList());

Answer 1

你应该在这里改变方法，状态应该由 RandomComponent.js 管理， ToggleComponent.js 应该在每次调用时调用回调。结果应该是这样的：的 RandomComponent.js

constructor(props){ super(props); this.state={ testA:false, testB:false, testC:false, testD:false, } } updateCheckValue(att){ this.setState({ [att]: !this.state[att] }, ()=>{ console.log(this.state) }) } } render(){ <ToggleComponent title="TestA" onToggle={() => this.updateCheckValue("testA")}/> <ToggleComponent title="TestB" onToggle={() => this.updateCheckValue("testB")/> <ToggleComponent title="TestC" onToggle={() => this.updateCheckValue("testC")/> <ToggleComponent title="TestD" onToggle={() => this.updateCheckValue("testD")/> }

<强> ToggleComponent.js

<Row className={styles.container}> <Col sm={1} md={1} lg={1}></Col> <Col sm={2} md={2} lg={2}> <Toggle onChange={this.props.onToggle} icons={false} /> </Col> <Col sm={8} md={8} lg={8}> <h4>{this.props.title}</h4> </Col> <Col sm={1} md={1} lg={1}></Col> </Row>

React State未更新并重置为原始状态

1 个答案: