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

Question

I've some difficulties to understand jsx-no-bind when we've some args to pass in method.

My code works correctly :

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>
    );
  }
}

But I've jsx-no-bind with my linter.

How can i use the right way with :

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

But ... in passing some args. In my case, I want to pass "reverse" argument.

thanks in advance,

Answer 1

This is solved with a partial applicated function:

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>
    );
  }
}

Answer 2

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

This should work just fine. Later when you call this.foo( true ) or this.foo( false ) , the function will be correctly bound to the instance.

Depending on your transpiler/stack you can make use of arrow functions to make it even quicker:

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