react-bits icon indicating copy to clipboard operation
react-bits copied to clipboard

Extend event handlers with an example of arrow function in class property

Open sejoker opened this issue 7 years ago • 1 comments

Based on the description. If project owners are ok enable Stage 2 Babel transformation it is a good alternative to bind in the constructor.

class Switcher extends React.Component {
  constructor(props) {
    super(props);
    this.state = { name: 'React in patterns' };
  }
  render() {
    return (
      <button onClick={ this.onButtonClick }>
        click me
      </button>
    );
  }
  onButtonClick = () => {
    console.log(`Button is clicked inside ${ this.state.name }`);
  }
}

Let me know if you accept the PR.

sejoker avatar Apr 08 '17 21:04 sejoker

I suggest moving it even further:

class Switcher extends React.Component {
  state = { name: 'React in patterns' }
  
  render() {
    return (
      <button onClick={ this._buttonClick }>
        click me
      </button>
    )
  }

  handleButtonClick = () => {
    console.log(`Button is clicked inside ${ this.state.name }`)
  }
}

cytrowski avatar Nov 11 '17 19:11 cytrowski