小编典典

此值在React事件处理程序中

reactjs

由于某些原因,此值在反应事件处理程序中丢失。阅读我认为有反应的文档在这里做了一些工作,以确保将其设置为正确的值

以下内容不符合我的预期

import React from 'react';

export default class Observer extends React.Component {

    handleClick() {
        console.log(this); //logs undefined
    }
    render() {
        return (
            <button onClick={this.handleClick}>Click</button>
        );
    }
}

但这确实是:

import React from 'react';

export default class Observer extends React.Component {

    handleClick() {
        console.log(this); //logs Observer class instance
    }
    render() {
        return (
            <button onClick={this.handleClick.bind(this)}>Click</button>
        );
    }
}

React和ES6对我来说是新手,但这似乎不是正确的行为?


阅读 289

收藏
2020-07-22

共1个答案

小编典典

如果使用新class语法,这对于JavaScript和React是正确的行为。

自动绑定功能不适用于
v0.13.0中的ES6类

因此,您需要使用:

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

或其他技巧之一:

export default class Observer extends React.Component {
  constructor() {
    super();
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    /* ... */
  }
  render() {
      return <button onClick={this.handleClick}>Click</button>
  }
}
2020-07-22