Question

我只想从ui语义的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} />

从文档中，the second argument is where the value is passed

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

记住：：setState是异步的，因此您无法像尝试的那样console.log值。如果您确实想查看setState的更新值，请在setState上使用回调，或仅将console.log移动到渲染器，以便在渲染周期中看到值更改。

Answer 2

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

类组件的onChange事件问题

2 个答案: