将状态变量作为prop传递,并且在第一个事件中不会更改

时间:2017-09-11 17:17:30

标签: reactjs

我将由我的组件状态管理的布尔值传递给Checkbox组件,但是我遇到了问题,该复选框响应了已更改的状态变量。我第一次单击调用已验证的allRowCheck的复选框时,复选框不会更改。当第二次点击时,它会根据需要及其后进行响应。

  render()
  {
    return(
      <div><Table  style = {{textAlign: 'right'}} data={this.state.testData2}
        rowStyle={(row, index) => {return { textAlign: 'right' };}}>
          <Table.Column
            header={<Form.Checkbox checked = {this.state.allRows}  onChange={() => this.allRowCheck()}/> }
            body={
              (data) => <Form.Checkbox checked = {data.get('checked')} onChange={() => this.onCheck(data)}/>
            }/>
            <Table.Column
              header={'Name'}
              body={(data) => data.get('scenarioName')} 
            />
            <Table.Column
              header={'Condition'}
              body={(data) => data.get('condition')}
            />
            <Table.Column
              header={'Notifications'}
              body={(data) => data.get('notifications')}/>
            <Table.Column
              header={'Owner'}
              body={(data) => data.get('owner')}/>
      </Table></div>
    )
  }
allRowCheck = () => {
    console.log('all row checks before> ', this.state.allRows);


    this.setState({

        testData2: this.state.testData2.map((data) => data.set('checked', !this.state.allRows)),

    })
    //twp set states for no reason..
    this.setState({
      allRows: !this.state.allRows
    }, () => {
      console.log('after> ', this.state.allRows)
    })

  }

0 个答案:

没有答案