Question

我这里有几个组件。父组件（Dropdown）有两个子组件，每个子组件都有一个在Dropdown中触发的点击事件。我没有第一次单击事件（handleClick）的问题，但第二次单击事件（handleItemClick）的绑定似乎失败

错误：

Dropdown.js:57 Uncaught TypeError: Cannot read property 'handleItemClick' of undefined

父组件（下拉列表）：

export class Dropdown extends Component {
  constructor(props) {
    super(props);
    this.state = { open: false };

    this.handleClick = this.handleClick.bind(this);
    this.handleItemClick = this.handleItemClick.bind(this);
  }
  handleClick() {
    this.setState({ open: !this.state.open });
  }
  handleItemClick() {
    console.log("anything");
  }
  render() {
    let list = this.props.items.map(function(item) {
      return <ListItem item={item} key={item} whenItemClicked={this.handleItemClick}/>
    });
    return (
      <div className="dropdown">
        <Button
          className="btn-default"
          title={this.props.title}
          subTitleClassName="caret"
          whenClicked={this.handleClick} />
        <ul className={"dropdown-menu " + (this.state.open ? "show" : "")}>
          {list}
        </ul>
      </div>
    );
  }
}

子组件（ListItem），此项的相应点击事件是未能绑定的事件。

export class ListItem extends Component {
  render() {
    return (
      <li><a onClick={this.props.whenItemClicked}>{this.props.item}</a></li>
    );
  }
}

第二个子组件，此项目的相应点击事件有效

export class Button extends Component {
  render() {
    return (
      <button onClick={this.props.whenClicked} className={"btn " + this.props.className} type="button">
        {this.props.title} <span className={this.props.subTitleClassName}>{this.props.subTitle}</span>
      </button>
    );
  }
}

这可能是我忽视的显而易见的事情。任何帮助将不胜感激！

Answer 1

map会将this绑定到函数调用者，即函数调用者。用this编写的map内的function () {}是数组而不是组件。

请使用箭头功能，这将保留周围this的“词汇”this，这是您的组件。

let list = this.props.items.map(item => { 
  return <ListItem whenItemClicked={this.handleItemClick}/>
});

ES6 / React第二项绑定失败

1 个答案: