类组件的 onChange 事件问题

Question

我只想从具有以下代码的 ui-semantic 中的 Radio 组件（选中或未选中）中获取价值：  componentDidMount() {    this.setState({      startDate: moment()        .subtract(30, 'days')        .startOf('day'),      endDate: moment().endOf('day'),      isChecked: false,    });  }无线电组件：<Radio toggle className="ongoing-checkbox"  label="Show ongoing alerts"  value={ !this.state.isChecked }  onChange={e => this.selectOngoingAlerts(e)}></Radio>和处理函数：selectOngoingAlerts = (e) => {  this.setState(this.state.isChecked = true);  const { householdAlerts } = this.props;  console.log('checked', this.state.isChecked);}如何在selectOngoingAlerts功能中拥有 Radio 组件的状态？我想对是否选中无线电采取不同的行动。

Answer 1

您需要接受来自 onChange 回调的第二个参数的数据/检查值。您也试图分配值，setState这是错误的。像你在你的componentDidMount

selectOngoingAlerts = (e, data) => {

  this.setState({isChecked: data});

}

还要更新无线电组件以将回调传递给您的处理程序，您不需要或不想要一个 lambda ..

<Radio toggle className="ongoing-checkbox"

  label="Show ongoing alerts"

  value={ !this.state.isChecked }

  onChange={this.selectOngoingAlerts} />

从文档中，第二个参数是传递值的位置

您应该Checkbox像我链接的那样引用文档，因为它Radio是语法糖<Checkbox radio />

记住： setState是异步的，所以你不能console.log像你想要的那样取值。如果您真的想查看它的更新值，请改为在 setState 上使用回调，或者只是将您移动console.log到渲染，以便您可以看到渲染周期中的值变化。

Answer 2

selectOngoingAlerts = (e) => {

  const {isChecked} = this.state;

  this.setState({ isChecked : !isChecked });

  isChecked ? console.log('on') : console.log('off');

}