javascript - 在函数声明中以相反的顺序 react bind(this, value)

Question

我有一个 onClick 处理函数，它将点击事件和索引参数传递给该函数。

然而，事实证明我必须以相反的顺序声明事物......因此:

render(){
    return(
       <button onClick={this.deleteItem.bind(this, index)}Click Me</button>
    )
}

deleteItem(index, e){
    e.preventDefault();
    this.props.dispatch(deleteTodo(index));
}

这没有问题。但是为什么一定要在deleteItem()中切换this和index呢？这是否记录在我不知道的地方？

Answer 1

this 和 index 没有被切换。您看到的是使用 bind 绑定(bind) this 值和直接调用该函数之间的区别。

简而言之，如果您要直接调用该函数，如下所示:

<button onClick={this.deleteItem}Click Me</button>

您将按照在函数中声明参数的顺序获取参数。但是，您显然知道，以这种方式调用函数会给您留下一个 this 变量，该变量引用调用事件处理程序的上下文，而不是您声明的实际类。

您正在做的是调用 this.deleteItem.bind，这是确保 this 变量在上下文中被调用时正确绑定(bind)所必需的的事件。

执行此操作的更好方法是 React documentation on ES6 classes 中显示的方法: 在类的构造函数中绑定(bind)事件处理程序。

例如，

export class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {count: props.initialCount};
    this.tick = this.tick.bind(this);
  }
  tick() {
    this.setState({count: this.state.count + 1});
  }
  render() {
    return (
      <div onClick={this.tick}>
        Clicks: {this.state.count}
      </div>
    );
  }
}

通过在构造函数中绑定(bind)事件处理方法，更加清晰，使用时不用担心上下文。

编辑

有时，您需要将特定数据传递给您的事件处理程序。这可以使用此处的构造函数绑定(bind)方法。只需做这样的事情:

constructor(props) {
    super(props);

    this.myHandler = this.myHandler.bind(this);
}

myHandler(importantValue, event) {
    console.log(importantValue); // will log 'pass this value!'
    // and you have access to the event object, if you pass it along
    // if you don't need the event object, then just leave it out
}

render() {
    <div onClick={(event) => { this.myHandler('pass this value!', event); }>
        Click Me!
    </div>
}

通过在元素的 onClick 属性中添加一个匿名函数作为事件处理程序，您可以做任何您想做的事情!