class 组件的 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} />

根据文档，the second argument is where the value is passed

您应该参考我链接的 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');
}

class 组件的 onChange 事件问题

onChange event issue with class component

javascript

reactjs

semantic-ui