OnClick не принимает функцию

Question

Я пытаюсь создать кнопку, которая при нажатии изменит логическое состояние с false на true, а затем откроет DialogBox.Я создал функцию для изменения состояния с ложного на истинное, однако я получаю следующую ошибку.

"openDialog не является функцией"

Вот код функции и диалоговое окно, которым я являюсьпытаясь использовать его с уважением:

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


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

Как вы можете видеть, они очень просты> Я также нашел другие примеры, где OnCLick действительно работает, я не очень понимаю, почему это не работает.

Answer 1

Здесь есть несколько проблем:

1. Как и Jaromanda X, упомянутая в комментарии, openDialog не существует, поскольку это this.openDialog, поэтому должно быть onClick={() => this.openDialog()}.Но вам даже не нужна эта дополнительная функция-обертка, вы можете назначить ее напрямую: onClick={this.openDialog}

2. Это может быть только в примере, но вы забыли метод render, должно быть:

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

Answer 2

Предполагая, что этот код существует в функции рендеринга и

Я считаю, что должны быть фигурные скобки, если обратный вызов имеет несколько строк. Или это должно быть в одной строке

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

Или

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

Answer 3

Попробуйте позвонить openDialog() с this.openDialog().

РЕДАКТИРОВАТЬ: В ответ на ваш комментарий ...

В вашем конструкторе вам нужно будет связать this сфункция, в которой вы используете this.setState(), поэтому this (в openDialog) указывает на ваш компонент, а не на функцию, в которой вы устанавливаете состояние.Попробуйте это вместе с первым ответом.

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