функция в дочернем компоненте не может setState в родительском компоненте

Question

Я использую реагировать на проект.Вот мой код для родительского компонента:

class Parent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      deleteConfirm: false
    };
  }

  onDelete = pass => {
    this.setState({ deleteConfirm: false });
    if (pass === true) {
      const { menu, onDelete, restaurantId } = this.props;
      //onDelete(menu.id, restaurantId);
    }
  };

  openDiag() {
    this.setState({ deleteConfirm: true });
  }

  render() {
    return (
      <div>
        <Button
          className={classes.button}
          variant="contained"
          color="secondary"
          onClick={this.openDiag.bind(this)}
        >
          Delete
          {this.state.deleteConfirm ? (
            <Child onDelete={this.onDelete.bind(this)} />
          ) : null}
          <Delete className={classes.rightIcon} />
        </Button>
      </div>
    );
  }
}

Родительский компонент имеет состояние с именем deleteConfirm. Если я нажимаю кнопку Удалить, deleteConfirm устанавливается в значение true, а дочерний компонент отображается.Функция OnDelete передает дочернему компоненту, дочерний компонент представляет собой диалоговое окно Material Ui, которое используется для подтверждения действия удаления.Вот код:

class Child extends Component {
  state = {
    open: true
  };

  handleClose = (e, confirm) => {
    const { onDelete } = this.props;
    if (confirm === true) {
      onDelete(true);
    } else {
      onDelete(false);
    }
    this.setState({ open: false });
  };

  render() {
    return (
      <div>
        <Dialog
          open={this.state.open}
          onClose={e => this.handleClose(e, false)}
          aria-labelledby="alert-dialog-title"
          aria-describedby="alert-dialog-description"
        >
          <DialogActions>
            <Button onClick={e => this.handleClose(e, false)} 
              color="primary">
              Cancel
            </Button>
            <Button
              onClick={e => this.handleClose(e, true)}
              color="primary"
              autoFocus
            >
              Confirm
            </Button>
          </DialogActions>
        </Dialog>
      </div>
    );
  }
}

Если я нажму кнопку отмены, действие удаления отменяется и вызывается родительская функция onDelete.deleteConfirm в родительском компоненте должен быть установлен в false.Тем не менее, состояние всегда верно, и я не могу его изменить.Я очень благодарен за любого, кто хотел бы помочь мне.Спасибо!

Answer 1

Классика Распространение событий Ошибка.Вы встроили обработчик кликов в другой обработчик кликов, который перевернул логику внутреннего.

Используйте event.stopPropagation во внутреннем обработчике или переставьте элементы так, чтобы они не были вложены в одиндругое:

  render() {
    return (
      <div>
        <Button
          className={classes.button}
          variant="contained"
          color="secondary"
          onClick={this.openDiag.bind(this)}
        >
          Delete
          <Delete className={classes.rightIcon} />
        </Button>

        {this.state.deleteConfirm ? (
          <Child onDelete={this.onDelete.bind(this)} />
        ) : null}
      </div>
    );