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

这里有几个问题：

就像注释中提到的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}
   />);
 }

Answer 3

尝试用openDialog()呼叫this.openDialog()。

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

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

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

OnClick不接受功能

3 个答案: