Question

我是React的新手，下面是一些代码

export default class App extends Component {
   ...
   handleEvent() {
      this.setState({ message: "Clicked!"});
   }

   render() {
      return <buttononClick={ this.handleEvent }>Click</button>
   }
}

，错误是

未捕获的TypeError：无法读取未定义的属性'setState'

我实际上知道为什么会发生错误，因为默认情况下this未设置或绑定到App实例。我们需要像下面这样来解决问题：

export default class App extends Component {
   ... 
   this.handleEvent = this.handleEvent.bind(this);
}

但是令我惊讶的是，如果我将箭头功能用作：

export default class App extends Component {
   ...
   handleEvent = () => {
      this.setState({ message: "Clicked!"});
   }

   render() {
      return <buttononClick={ this.handleEvent }>Click</button>
   }
}

然后它起作用了，为什么？箭头功能不是没有自己的“ this”值，而必须从执行上下文中继承吗？因此，如果正常功能不起作用，那么箭头功能就更不可能起作用了，不是吗？

Answer 1

将“ this”绑定到函数时，就是将该对象（执行上下文）传递给接收函数。在这种情况下，在react中，您需要将此对象从周围的执行上下文React类传递给要使用的函数。

使用箭头功能时，它们会自动继承其父级执行上下文，因此无需绑定此对象，因为箭头功能已经可以访问它。

Answer 2

箭头函数使用闭包函数中的this

    function test() {
      let x = 2;
      function test2() {
        console.log(x) //2  it use x from closure 
      }
      test2()
    }

现在，如果您想从函数中获取this，它会说好，我自己有this，我不需要其他地方的this

，问题是this是什么？是调用此函数的对象。因此，当子组件调用您的函数this时，它将是子组件本身

但是当您使用箭头函数导致它没有this时，他们说好，我没有this，在哪里可以从我的父母那里使用闭包得到一个。注意箭头函数的父级是声明它的父级

但是绑定函数有什么作用？它说好，我要创建一个新函数，this将始终是我设置的参数，没有人可以更改它。

为什么我需要在react事件处理程序中使用箭头功能

2 个答案: