React onClick, Невозможно прочитать свойство bind неопределенного

Question

Я пытаюсь запустить функцию onclick в реакции

Моя кнопка:

<button onClick={this.logOut.bind(this)}>LogOut</button>

Моя функция

function logOut(){
Auth.signOut()
.then(data => console.log(logout)
.catch(err => console.log(err));
}

, но ошибка возвращается Не удаетсячитать свойство 'bind' из неопределенного

Answer 1

Было бы полезно, если вы можете дать более подробную информацию.

Только что попробовал пример в codepen, и я вижу, что он работает нормально.https://codepen.io/anon/pen/qKBdaB?editors=0011

class Toggle extends React.Component {


  handleClick() {
    console.log('Hello')
 }

render() {
 return (
  <button onClick={this.handleClick.bind(this)}>
   SayHello
  </button>
);
}
}

ReactDOM.render(
<Toggle />,
  document.getElementById('root')
);

Answer 2

Во-первых, никогда не связывайтесь в вашем методе рендеринга.bind возвращает новый метод каждый раз, когда вы вызываете его, что означает, что реакция не может оптимизировать ваш метод рендеринга.React просматривает реквизиты компонентов, чтобы увидеть, изменилось ли что-нибудь, а с помощью функций сравнивает равенство по ссылке на объект.Поскольку ваша функция будет новой функцией каждый раз, реакция будет думать, что все меняется.

Во-вторых, вы можете использовать функцию стрелки в своем компоненте, чтобы избежать необходимости связывать все вместе.

Вот два способа написать это по-разному: сначала с помощью bind:

class MyComponent extends Component {
    constructor() {
        this.logOut = this.logOut.bind(this);
    }
    function logOut() {
        //...
    }
    function render() {
        return <button onClick={this.logOut}>LogOut</button>
    }
}

Во-вторых, с помощью функции со стрелкой:

class MyComponent extends Component {
    logOut = () => {
        //...
    }
    function render() {
        return <button onClick={this.logOut}>LogOut</button>
    }
}