重構函數作為屬性從es5傳遞到es6

Question

我目前正在將我的代碼從es5重構到es6，但是在重構時遇到了麻煩……

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

如何在構造函數中綁定創建組件時傳遞的此函數？

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

您正在類上創建_handleClick方法，但隨后在構造函數中使用this._handleClick = this.props.onClick.bind(this);覆蓋它this._handleClick = this.props.onClick.bind(this); ，然后通過傳遞onClick={this.props.onClick}完全忽略它。

我懷疑您真正想要的是bind onClick函數bind到在該組件的構造函數中擁有它的組件，而不是在正在通過的組件中進行bind 。

Answer 2

這樣可以解決您的問題嗎？

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