子组件中的函数不能在父组件中设置状态答案

【问题标题】：function in child component can't setState in parent component子组件中的函数不能在父组件中设置状态
【发布时间】：2018-10-01 23:43:59
【问题描述】：

我正在为项目使用 react。这是我的父组件代码：

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，如果我按下Delete按钮，deleteConfirm被设置为true并且子组件被渲染。 OnDelete 函数传递给子组件，子组件是一个 Material Ui Dialog，用于确认删除操作。代码如下：

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。但是，状态总是真实的，我无法改变它。我非常感谢任何愿意帮助我的人。谢谢！

【问题讨论】：

这是您的确切代码吗？你的Parent 类'render 函数没有返回任何东西
也...考虑使用 prettier 来格式化您的代码...它现在的格式不是很好..prettier.io
@azium 抱歉格式化。我已经修好了。我刚刚拿起了我的代码的一些主要部分。 Parenet 类在我的初始类中呈现
。
谢谢，看起来好多了。我怀疑因为您的Child 位于Button 内，所以事件正在传播并触发您周围的按钮onClick，它会打开模式。如果在handleClose 中添加e.stopPropagation() 会怎样？
或者，您可以移动Child，使其位于Button 旁边，而不是在其中