React onClick, невозможно прочитать свойство bind из undefined
Я пытаюсь запустить функцию onclick в реакции
Моя кнопка:
<button onClick = {this.logOut.bind(this)}>LogOut</button>
Моя функция
function logOut(){
Auth.signOut()
.then(data => console.info(logout)
.catch(err => console.info(err));
}
но ошибка возвращается. Невозможно прочитать свойство bind неопределенного значения.
опубликуйте весь компонент, скорее всего, вам нужно удалить ключевое слово function
как @lustoykov: предлагаемое ключевое слово function не требуется внутри класса в ES6
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Во-первых, никогда не привязывайте свой метод рендеринга. bind возвращает новый метод каждый раз, когда вы его вызываете, что означает, что реакция не может оптимизировать ваш метод рендеринга. React смотрит на свойства компонентов, чтобы узнать, не изменилось ли что-нибудь, а с функциями сравнивает равенство по ссылке на объект. Поскольку ваша функция каждый раз будет новой функцией, 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>
}
}
ключевая информация: "никогда не привязывайте свой метод рендеринга"
Было бы полезно, если бы вы могли предоставить более подробную информацию.
Просто попробовал пример в коде, и я вижу, что он работает нормально. https://codepen.io/anon/pen/qKBdaB?editors=0011
class Toggle extends React.Component {
handleClick() {
console.info('Hello')
}
render() {
return (
<button onClick = {this.handleClick.bind(this)}>
SayHello
</button>
);
}
}
ReactDOM.render(
<Toggle />,
document.getElementById('root')
);
Попробуйте добавить
this.logOut = this.logOut.bind(this);в свой конструктор, а затем замените вызов на{this.logOut}