react/jsx-no-bind: 如何传递参数

Question

当我们有一些参数要传入方法时，我很难理解 jsx-no-bind。

我的代码工作正常：

class Foo extends React.Component {
  foo(reverse, e) {
    if(reverse) {
      //smthg to do with e.target
    } else {
      //smthg to do with e.target  
    }
    // call this.bar()
  }

  bar() {
   //smthg
  }

  render() {
    return (
      <button type="button" onClick={this.foo.bind(this, false)}>go</button>
      <button type="button" onClick={this.foo.bind(this, true)}>reverse</button>
    );
  }
}

但是我的 linter 没有绑定 jsx。

如何正确使用：

constructor() {
  super();
  this.foo = this.foo.bind(this);
}

但是...传递一些参数。就我而言，我想传递 "reverse" 参数。

提前致谢，

Answer 1

constructor() {
  super();
  this.foo = this.foo.bind(this);
}

这应该可以正常工作。稍后当您调用 this.foo( true ) 或 this.foo( false ) 时，该函数将正确绑定到实例。

根据您的 transpiler/stack，您可以使用箭头函数使其更快：

class Foo extends React.Component {
  foo = ( reverse, e ) => {
    // ...
  }
}

Answer 2

这已通过部分应用函数解决：

class Foo extends React.Component {
  constructor() {
    super();
    this.foo = this.foo.bind(this); // Bind the function as usual
  }

  foo(reverse, e) {
    return () => { // Here you're returning a new function wrapping the original function
      if(reverse) {
        //smthg to do with e.target
      } else {
        //smthg to do with e.target  
      }
      // call this.bar()
    }
  }

  render() {
    return (
      <button type="button" onClick={this.foo(false)}>go</button> // Execute the function here with the argument
      <button type="button" onClick={this.foo(true)}>reverse</button>
    );
  }
}

react/jsx-no-bind: 如何传递参数

react/jsx-no-bind: how to pass args

javascript

bind

args

reactjs