Question

我试图在反应

中运行onclick功能

我的按钮：

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

我的功能

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

但错误回来无法读取属性＆＃39; bind＆＃39;未定义的

Answer 1

首先，永远不要在你的渲染方法中绑定。 bind每次调用它时都会返回一个新方法，这意味着反应无法优化您的渲染方法。 React查看组件的props以查看是否有任何更改，并且通过函数，它比较了对象引用的相等性。由于你的功能每次都是一个新功能，反应会认为事情正在发生变化。

其次，您可以在组件中使用箭头功能，以避免需要一起绑定。

以下两种方式可以区别对待，首先使用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>
    }
}

Answer 2

如果您能提供更多详细信息，将会有所帮助。

刚在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')
);

反应onClick，无法读取属性＆＃39; bind＆＃39;未定义的

2 个答案: