OnClick不接受功能

Question

我正在尝试创建一个按钮，单击该按钮时，将布尔状态从false更改为true，然后打开DialogBox。我创建了一个函数来将状态从false更改为true但是我收到以下错误。

“openDialog不是一个功能”

这是函数的代码和我试图使用它的对话框：

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


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

正如你所看到的那样，它们很简单>我还发现了OnCLick实际工作的其他例子我真的不明白为什么这不起作用。

Answer 1

假设此代码存在于render函数中

我相信如果回调有多行，必须有大括号。否则它必须在一行

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

要么

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

Answer 2

这里有一些问题：

1. 像评论中提到的Jaromanda X一样，openDialog不存在，因为它是this.openDialog，所以它应该是onClick={() => this.openDialog()}。但是你甚至不需要额外的包装函数，你可以直接分配它：onClick={this.openDialog}
2. 它可能只是在示例中，但您忘记了“渲染”方法，它应该是：

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

Answer 3

尝试用openDialog()调用this.openDialog()。

编辑：回应你的评论......

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

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