类组件的 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这是错误的。像你在你的componentDidMountselectOngoingAlerts = (e, data) => {&nbsp; this.setState({isChecked: data});}还要更新无线电组件以将回调传递给您的处理程序，您不需要或不想要一个 lambda ..<Radio toggle className="ongoing-checkbox"&nbsp; label="Show ongoing alerts"&nbsp; value={ !this.state.isChecked }&nbsp; onChange={this.selectOngoingAlerts} />从文档中，第二个参数是传递值的位置您应该Checkbox像我链接的那样引用文档，因为它Radio是语法糖<Checkbox radio />记住： setState是异步的，所以你不能console.log像你想要的那样取值。如果您真的想查看它的更新值，请改为在 setState 上使用回调，或者只是将您移动console.log到渲染，以便您可以看到渲染周期中的值变化。

Answer 2

selectOngoingAlerts = (e) => {&nbsp; const {isChecked} = this.state;&nbsp; this.setState({ isChecked : !isChecked });&nbsp; isChecked ? console.log('on') : console.log('off');}