重构函数作为属性从es5传递到es6

Question

I am currently in the process of refactoring my code from es5 to es6, but have hit a wall when it came to refactoring...

<li className="pure-menu-item" onClick={this.props.onClick}></li>

How would I bind this function which is passed when the component is created, in the constructor?

class NavButton extends React.Component {
  constructor () {
    super();
    this._handleClick = this.props.onClick.bind(this);
  }
  render() {
    return (
      <li className="pure-menu-item" onClick={this.props.onClick}>
        <a className="pure-menu-link">{this.props.text}</a>
      </li>
    );
  }
  _handleClick() {
    alert('test');
  }
}

Answer 1

You're making a _handleClick method on your class, but then overwriting it in the constructor with this._handleClick = this.props.onClick.bind(this); , and then ignoring it completely by passing onClick={this.props.onClick} .

I suspect what you really want is to bind your onClick function to the component that owns it in that component's constructor, rather than in the component it's being passed through.

Answer 2

Will this solve your issue?

class NavButton extends React.Component {
  render() {
    return (
      <li className="pure-menu-item" onClick={this.props.handleClick}>
        <a className="pure-menu-link">{this.props.text}</a>
      </li>
    );
  }
}

NavButton.propTypes = {
  handleClick: React.PropTypes.func,
  text: React.PropTypes.string
};