Reactnative 调用 ES6 方法时绑定上下文.如何从称为回调的方法中访问对象

react createClass(ES5)创建类的方式有一个内置功能，可以自动将所有方法绑定到this.但在ES6中引入classes和迁移时.他们发现，对于其他类中不习惯此功能的JavaScript开发人员来说，createClass可能有点让人困惑，或者当他们从React转移到其他类时，可能会让人困惑.

因此，他们决定不在React的类模型中内置此功能.如果愿意，仍然可以在构造函数中显式地预绑定方法

class WeatherProject extends Component {
  constructor(props) {
    super(props);
    this.state = {
      zip: ''
    };
    this._handleTextChange = this._handleTextChange.bind(this); //Binding to `this`
  }

  _handleTextChange(event) {
    console.log(event.nativeEvent.text);
    this.setState({zip: event.nativeEvent.text})
  }

但我们总是有一个简单的方法来避免这种预绑定.是 啊你明白了.箭头功能.

class WeatherProject extends Component {
  constructor(props) {
    super(props);
    this.state = {
      zip: ''
    };
  }

  _handleTextChange = event => {
    console.log(event.nativeEvent.text);
    this.setState({zip: event.nativeEvent.text})
  }

  render() {
    return (
      <TextInput
        style={styles.input}
        onSubmitEditing={this._handleTextChange}/>
    );
  }
}

顺便说一句，这都是关于react 的.ES6类总是有一种从方法中访问对象上下文的方法，而无需将对象显式绑定回它自己的方法.

class bindTesting {
  constructor() {
    this.demo = 'Check 1';
  }

  someMethod() {
    console.log(this.demo);
  }

  callMe() {
    this.someMethod();
  }
}

let x = new bindTesting();
x.callMe(); //Prints 'Check 1';

但如果我们在JSX表达式中调用它，它不会打印"Check 1".

编辑::正如@Oka所提到的，类主体中的箭头函数是ES7+特性，可以在编译器/多填充中使用，比如babel.如果您不使用支持此功能的transpiler，我们可以像上面提到的那样绑定到this，或者像这样编写一个新的BaseComponent(这是个坏主意)

class BaseComponent extends React.Component {
 _bind(...methods) {
  methods.forEach( (method) => this[method] = this[method].bind(this) );
 }
}

class ExampleComponent extends BaseComponent {
 constructor() {
  super();
  this._bind('_handleTextChange', '_handleClick');
 }
 // ...
}