Javascript OnClick不接受函数

我正在尝试创建一个按钮，当单击该按钮时，将布尔状态从false更改为true，然后打开一个对话框。我创建了一个函数，将状态从false更改为true，但出现以下错误

“openDialog不是一个函数”

下面是函数的代码和我尝试恭敬地使用它的对话框：

  openDialog = () => {
    this.setState({
      modalOpen: true,
    });
  };


<Dialog
   className="MenuOption"
   primaryText="Open"
   onClick={() => 
     openDialog()
   }
  />

openDialog=（）=>{
这是我的国家({
莫达洛彭：是的，
});
};
openDialog（）
}
/>

如您所见，它们非常简单>我还发现了OnCLick实际工作的其他示例

---

我真的不明白为什么这样不行。

试着用

this.openDialog（）调用
openDialog（）

编辑：
回应你的评论

在构造函数中，您需要将
this
绑定到使用
this.setState（）
的函数，以便
this
（在openDialog中）指向您的组件，而不是您正在设置状态的函数。试着把这个和第一个答案结合起来

// in component constructor
this.openDialog = this.openDialog.bind(this)

这里有几个问题：

与评论中提到的Jaromanda X一样，
openDialog
不存在，因为它是
this.openDialog
，所以它应该是
onClick={（）=>this.openDialog（）}
。但是您甚至不需要额外的包装函数，您可以直接分配它：
onClick={this.openDialog}

可能只是在示例中，但您忘记了“render”方法，它应该是：

openDialog = () => {
    this.setState({
      modalOpen: true,
    });
};

render() {
 return (
  <Dialog
    className="MenuOption"
    primaryText="Open"
    onClick={this.openDialog}
   />);
 }

openDialog=（）=>{
这是我的国家({
莫达洛彭：是的，
});
};
render（）{
返回(
);
}

假设该代码存在于渲染函数中，并且

我相信如果回调有多行，那么肯定有大括号。否则它必须在一条线上

<Dialog
   className="MenuOption"
   primaryText="Open"
   onClick={() => {
     openDialog()
   }}
/>

{
openDialog（）
}}
/>

或

{
openDialog（）
}}
/>
更改为
this.openDialog（）
甚至
onClick={this.openDialog}
它不起作用，但这是我的错，因为我认为问题不完整。我会在biti编辑的答案中更新它。。。尝试一下，看看是否有帮助。当我试图将函数也传递给另一个组件/类时，是否也必须使用此选项？“将函数也传递给另一个组件/类”-您能澄清一下吗？
<Dialog
   className="MenuOption"
   primaryText="Open"
   onClick={() => {
     openDialog()
   }}
  />