避免.bind在ES6(7?)巴贝尔

Question

我在我的联署材料中有这个：

<Options options={options} onOptionSelect={this.onOptionSelect.bind(this)} />

但是，我发誓，在将回调方法传递给子响应组件时，我看到了一些否定.bind需求的幻想，对吗？

Answer 1

可以将箭头函数与属性初始化结合使用。

class Component extends React.Component {
  handleClick = () => {
    console.log(this.props);
  }

  render() {
    return <div onClick={this.handleClick} />
  }
}

因为箭头函数是在构造函数的作用域中声明的，而且由于箭头函数维护了声明作用域中的this，所以它都能工作。这里的缺点是，这些不是原型上的函数，它们都将用每个组件重新创建。但是，这并不是什么坏处，因为bind的结果是相同的。

Answer 2

可以使用ES2015类语法将组件的所有函数与此autoBind助手函数绑定：

class Component extends React.Component {
  constructor(props) {
    super(props);
    autoBind(this);
  }

  onOptionSelect() {
    // do stuff
  }

  render() {
    return <Options options={options} onOptionSelect={this.onOptionSelect} />;
  }
}

function autoBind(obj) {
    getAllMethods(obj.constructor.prototype)
        .forEach(mtd => {
            obj[mtd] = obj[mtd].bind(obj);
        });
}

function getAllMethods(obj) {
    return Object.getOwnPropertyNames(obj).filter(key => typeof obj[key] == "function");
}

注意，Component不必使用用箭头函数定义的方法。