Проблема события onChange с компонентом класса - PullRequest
Новая
       6

Проблема события onChange с компонентом класса

1 голос
/ 23 марта 2020

Я просто хочу получить значение от компонента Радио (отмечен или не отмечен) в ui-semanti c, имеющего следующий код: 

  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);
}

Как получить состояние компонента Radio в функции selectOngoingAlerts? Я хочу совершать различные действия, независимо от того, включена или выключена радиосвязь.

Ответы [ 2 ]

2 голосов
/ 23 марта 2020

Вам необходимо принять данные / проверенное значение из второго аргумента обратного вызова onChange. Вы также пытались присвоить значение в setState, что неверно. делайте это так, как вы делаете в вашем componentDidMount

selectOngoingAlerts = (e, data) => {
  this.setState({isChecked: data});
}

Также обновите компонент радиосвязи, чтобы просто передать обратный вызов вашему обработчику, вам здесь не нужна или не нужна лямбда-выражение .. 

<Radio toggle className="ongoing-checkbox"
  label="Show ongoing alerts"
  value={ !this.state.isChecked }
  onChange={this.selectOngoingAlerts} />

Из документов второй аргумент - это то, где передается значение

Вы должны ссылаться на Checkbox документы, как я связал, потому что Radio является syntacti c sugar для <Checkbox radio />

Помните: setState является асинхронным c, поэтому вы не можете console.log значение, как вы пытаетесь. Вместо этого используйте обратный вызов в setState, если вы действительно хотите увидеть его обновленное значение, или просто переместите console.log в рендер, чтобы увидеть изменение значения в циклах рендеринга.

0 голосов
/ 23 марта 2020 
selectOngoingAlerts = (e) => {
  const {isChecked} = this.state;
  this.setState({ isChecked : !isChecked });
  isChecked ? console.log('on') : console.log('off');
}
...