Question

我正在尝试上班this code。

/*
 * A simple React component
 */
class Application extends React.Component {
    num = 42;
    render() {
      return (
        <button onClick={this.show}>show</button>
      );
    }
    componentDidMount() {
      console.log(this.num);
    }
    show() {
      console.log(this.num);
    }
}

/*
 * Render the above component into the div#app
 */
React.render(<Application />, document.getElementById('app'));

问题是，当我单击按钮获取属性的值时，它将是未定义的。有趣的是，ComponentDidMount()函数可以访问num值。

我认为show()函数具有不同的上下文，这就是我无法通过num关键字引用this的原因。我试图在构造函数中绑定num值，但它也不起作用，所以我删除了它。

任何想法如何通过点击按钮获得num值？

Answer 1

您可以使用箭头功能

<button onClick={() => this.show()}>show</button>

或绑定this

的值

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

获取正确的num

参考：

箭头功能：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

Function.bind：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

Answer 2

由于您使用的是ES6语法，因此React不会将此自动绑定到您的方法，请参阅：

https://facebook.github.io/react/docs/reusable-components.html#no-autobinding

有关更多方法来执行此绑定，请参阅：

http://egorsmirnov.me/2015/08/16/react-and-es6-part3.html

编辑：接受的答案提供不良做法，请参阅：https://daveceddia.com/avoid-bind-when-passing-props/

Answer 3

你是对的 - show函数有不同的上下文。

您可以通过将上下文绑定到onClick回调：

来解决此问题

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

ES6 React属性未定义

3 个答案: