Question

我试图在React组件中绑定this时发现某些奇怪行为的原因。

我习惯于开发组件并将其方法放在类主体中，并将它们绑定到this中的组件constructor。但是，我最近决定通过提取一些大型方法来分离文件，然后将它们导入到组件中来清理和分离问题。

令我沮丧的是，在这种情况下，绑定this并不容易。更奇怪的是，虽然使用ES6箭头功能似乎没有正确绑定，但使用基本的ES5功能工作正常。我试图弄清楚这种行为的原因：

示例1 [按预计工作]

import React, { Component } from 'react';

class App extends Component {
  constructor(props) {
    super(props);
    this.changeName = this.changeName.bind(this);
    this.state = {
      name: 'John'
    };
  }

  changeName() {
    this.setState({
      ...this.state,
      name: 'Jane'
    });
  }
...

示例2 [NOT WORKING - TypeError：无法读取属性＆＃39; setState＆＃39;未定义的]

App.js

import React, { Component } from 'react';
import changeName from './change-name';

class App extends Component {
  constructor(props) {
    super(props);
    this.changeName = changeName.bind(this);
    this.state = {
      name: 'John'
    };
  }
...

change-name.js

const changeName = () => {
  this.setState({
    ...this.state,
    name: 'Jane'
  });
};

export default changeName;

示例3 [按预期工作 - 与示例2相同App.js]

change-name.js

function changeName() {
  this.setState({
    ...this.state,
    name: 'Jane'
  });
};

module.exports = changeName;

Answer 1

此行为是正确的箭头函数行为。

请参阅docs：

箭头函数表达式的语法短于函数表达式并不绑定它自己的this，arguments，super或 new.target。箭头功能始终是匿名的。这些功能表达式最适合非方法函数，但它们不能用作构造函数。

这部分不会绑定它本身就是你要问的那个。箭头函数从包围此函数声明的上下文中获取this。

Answer 2

这是新的es6功能样式。如果使用es6箭头功能，则不需要绑定您的methid。

从构造函数中删除绑定语句，它应该可以工作。

Answer 3

我更喜欢这种语法。它完美无缺，没有任何约束力：

<?php

namespace App\Http\Middleware;

use Closure;

class Owner
{
/**
 * Handle an incoming request.
 *
 * @param  \Illuminate\Http\Request  $request
 * @param  \Closure  $next
 * @return mixed
 */
public function handle($request, Closure $next)
{
     if (Auth::user()->privilege == "OWNER") {
       return $next($request);
    }

    return redirect('home');

}

React的绑定发生了什么？

3 个答案: