将单击处理程序与参数绑定的'React-ES6方式'

Question

我读了一大堆关于（）=

那么，处理这个问题最有效的“反应方式”是什么？

对于不需要传递参数的函数，构造函数中的绑定似乎工作得很好，如下所示：

constructor(props) {
    super(props)
    this.handleClick = this.handleClick.bind(this)
}

但是我们如何处理传递参数的绑定函数，而不将其绑定到prop中，如下所示：

<li onClick={this.handleClick.bind(this, item.id)} />{item.name}</li>

在构造函数中绑定this，然后在prop中绑定null或undefined是否会导致绑定函数只绑定一次？

请随意纠正我的任何误解。似乎这个问题的解决方案应该更加众所周知和普遍...也就是说，如果我不只是生活在岩石下！

编辑：

即使使用抽象，单击处理程序是否也会与每个单独的项目渲染绑定？

在本文中，他们给出这个示例是为了避免绑定click处理程序，但是因为React.createClass会自动绑定方法，所以我看不出这实际上是如何在每个项目呈现上绑定的？

var List = React.createClass({
  render() {
    let { handleClick } = this.props;
    // handleClick still expects an id, but we don't need to worry
    // about that here. Just pass the function itself and ListItem
    // will call it with the id.
    return (
      <ul>
        {this.props.items.map(item =>
          <ListItem key={item.id} item={item} onItemClick={handleClick} />
        )}
      </ul>
    );
  }
});

var ListItem = React.createClass({
  render() {
    // Don't need a bind here, since it's just calling
    // our own click handler
    return (
      <li onClick={this.handleClick}>
        {this.props.item.name}
      </li>
    );
  },

  handleClick() {
    // Our click handler knows the item's id, so it
    // can just pass it along.
    this.props.onItemClick(this.props.item.id);
  }
});

有人能解释一下吗？这看起来是不是避免了绑定每个ListItem渲染，但由于React.createClass中的自动绑定，它仍然可以绑定？

我用类列表扩展组件语法而不是createClass尝试了这个例子，并且这个.handleClick没有定义，因为handleClick方法没有绑定到类。

归根结底，这似乎只是清理了冗长的内容，并没有通过减少方法绑定来实际提高性能。。。




Answer 1

这管用吗？（使用TypeScript）

<Input type="password" onChange={this.onPasswordInputChange('primary')} />;
<Input type="password" onChange={this.onPasswordInputChange('secondary')} />;


interface IOnPasswordInputChange {
  (value: string): void;
}

private onPasswordInputChange = (type: string): IOnPasswordInputChange => {
  return (value: string) => {
    this.setState({ [type]: value });
  };
}

Answer 2

如果传递一个参数，那么您必须在渲染函数中绑定，而不是在构造函数中绑定。这可以使用绑定或箭头函数来完成。

<li onClick={this.handleClick.bind(this, item.id)} />{item.name}</li>

或

<li onClick={() => this.handleClick(item.id)} />{item.name}</li>

Answer 3

对于您的

这通常意味着您需要另一层抽象，即一个新的react组件，该组件返回相同的元素，但您可以将onClick作为prop以及item id作为prop传入。然后在该组件中调用this.props.onClick（this.props.id）或以任何方式格式化数据。

本文列出了绑定实例方法的每种方式之间的所有差异，以及每种方式对性能的影响https://medium.com/@housecor/react-binding-patterns-5-Approach-for-handling-this-92c651b5af56。