Question

我可能误解了亲子关系应该如何在React中工作（这是新知识），但以下几点应该在我的脑海中起作用：

我有一个名为.get()的父级，其中有一个名为<Home/>的子级，这是我要对其进行自定义后要自定义的Google材质对话框。

在孩子中，我有以下代码：

<ProjectDialog>

说实话，很普通的东西。但是我想能够从父级更改打开状态，我在这里尝试这样做：

handleOpen = () => {
    this.setState({ open: true });
};

但是，当我单击应该触发此对话框的任何元素时，会收到错误消息handleOpen（）不是函数。

还有其他方法可以做到吗？而是将打开状态存储在props中并以这种方式触发会有意义吗？

Answer 1

那不是应该工作的方式。

您必须以声明方式进行操作，这意味着打开/关闭信息应保留在父项中，并与道具一起传递给孩子。

类似这样的东西：

class Home extends Component {
  state = {
    isDialogOpen: false
  }

  handleOpen = () => this.setState({ isDialogOpen: true })

  render() {
    return (
      ...
      <ProjectDialog isOpen={ this.state.isDialogOpen } />
      ...
      <button onClick={ this.handleDialogOpen }>
        Open project dialog
      </button>
      ...
    )
  }
}

从父级调用子级中的函数会说“不是函数”吗？

1 个答案: