Событие onChange вызывается только один раз в реакции

Question

Я использую материал-интерфейс

Вот мой компонент реакции:

import Checkbox from '@material-ui/core/Checkbox';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import React from "react";
import { withStyles } from "@material-ui/core/styles";

const styles = (theme) => ({
});

class SomeComponent extends React.Component {
  static propTypes = {

  };

  state = {
    checked: true,
  }

  handleChange = name => event => {        
    event.persist()
    this.setState({ 
      [name]: event.target.checked 
    }, () => {
      if (event.target.checked) {
        this.props.parentMethod1(event.target.value)
      } else {
        this.props.parentMethod2(event.target.value)
      }
    });
  };

  render() {
    const { user } = this.props;
    return (
      <div>
        <FormControlLabel
          control={
            <Checkbox
              checked={this.state.checked}
              onChange={this.handleChange('checked')}
              value={user.id}
              color="primary"
            />
          }
          label={user.first_name}
        />
      </div>
    );
  }

}

export default withStyles(styles)(SomeComponent);

Проблема в том, что я могу выбрать / снять флажок только один раз . После выбора / снятия флажка событие onChange не происходит.

Можете ли вы помочь мне, как заставить Checkbox работать так, как он есть? Благодаря.

Вот воспроизведенная ошибка:

https://codesandbox.io/s/y041zknrqv

Answer 1

Если вы хотели изменить значение флажка.Вы не должны передавать одно и то же значение onChange в вашем случае

onChange={(e)=>this.handleChange(e)}

, и ваша функция смены дескриптора должна быть такой, как

handleChange =event=> {        
    this.setState(prevState=>{ 
      checked: !prevState.checked
    }, () => {
      if (this.state.checked) {
        this.props.parentMethod1(this.state.checked)
      } else {
        this.props.parentMethod2(this.state.checked)
      }
    });
  };

Это будет изменять ваше значение при каждом onChange событии.

Answer 2

Исходные кодыandbox от OP: https://codesandbox.io/s/y041zknrqv

Если приведенные выше кодыandbox правильно демонстрируют вашу реальную проблему, то ваша проблема в том, что вы запутались с event.stopPropagation и event.preventDefault

Inи Parent1, и Parent2, вы предоставляете обработчик событий onClick для контейнера div и реализует event.preventDefault и event.stopPropagation для обоих обработчиков.Итак, вот что происходит, когда вы устанавливаете флажок в первый раз:

• Флажок получает событие щелчка и обновляет состояние, в результате чего флажок = true.
• Событие вспыхивает до Parent2,Здесь onClick запускает функцию handleClick этого компонента.
• в handleClick, event.preventDefault останавливает действие браузера по умолчанию для этого события, то есть события будущих нажатий не будут вызывать флажок в то время как event.stopPropagation не позволяет родительским компонентам запускать onClick, то есть Parent1 будет немедленно никогда не получать событие щелчка.

А теперь, начиная со второго события щелчка и далеетолько Parent2 может получить и ответить.Его дети и его родители больше не будут ничего делать.Вы можете увидеть консольный журнал здесь: https://codesandbox.io/s/r75rp285xq

Итак, чтобы исправить вашу проблему, удалите event.preventDefault из Parent2 s handleClick.Если вы также хотите исправить поведение Parent1, удалите event.preventDefault из обоих компонентов и удалите event.stopPropagation из Parent2

Answer 3

Поскольку вы передаете функции параметр, попробуйте преобразовать его в функцию стрелки в событии onChange

<Checkbox
              checked={this.state.checked}
              onChange={() => this.handleChange('checked')}
              value={user.id}
              color="primary"
            />