Hi there's a way to avoid the use of bind for custom handler? <a href="http://

avoid bind about react-stamp HOT 6 CLOSED

stampit-org commented on June 10, 2024

avoid bind

from react-stamp.

Comments (6)

amelon commented on June 10, 2024

Actually if you don't use React.createClass there is no automatic binding (https://toddmotto.com/react-create-class-versus-component/).

There's at least two ways to avoid bind.

first one - double colons

const container = {
  state:{
    val: 'click me'
  },
    clickMe(evt) {
        this.setState({val: 'clicked'});
    },
    render() {
        return (
            <div className="clearfix">
                <a onClick={::this.clicMe}>{this.state.val}</a>
            </div>
        );
    }
}

This one is equivalent to <a onClick={this.clicMe.bind(this}>{this.state.val}</a> (http://stackoverflow.com/questions/31220078/javascript-double-colon-es7-proposal)

second one - fat arrow

const container = {
  state:{
    val: 'click me'
  },
    clickMe(evt) {
        this.setState({val: 'clicked'});
    },
    render() {
        return (
            <div className="clearfix">
                <a onClick={(e) => this.clicMe(e)}>{this.state.val}</a>
            </div>
        );
    }
}

This one is equivalent to

...
    render() {
        var _this = this
        return (
            <div className="clearfix">
                <a onClick={function(e) {_this.clicMe(e)}}>{this.state.val}</a>
            </div>
        );
    }
...

(https://strongloop.com/strongblog/an-introduction-to-javascript-es6-arrow-functions/)

For both cases you must use babel but as you use import it should be the case.
For double colon you have to use babel stage 0 (http://babeljs.io/docs/plugins/preset-stage-0/).

from react-stamp.

troutowicz commented on June 10, 2024

This is by design. We did not want automatic binding as experienced with React.createClass. @amelon has recommended two good alternatives to .bind().

from react-stamp.

a-ursino commented on June 10, 2024

Hi
yes, i know the double colons feature of ES7 and fat arrow but i want only to avoid this problem jsx-no-bind

thanks anyway

from react-stamp.

troutowicz commented on June 10, 2024

@killanaca, ah gotcha. Try using the init method.

const component = {
  init () {
    this.state = {
      val: 'click me'
    };

    this.onClick = this.onClick.bind(this);
  },

  onClick (e) {
    this.setState({ val: 'clicked' });
  },

  render () {
    return (
       <div>
         <a onClick={this.onClick}>{this.state.val}</a>
       </div>
    );
  }
};