ES6/React第二项绑定失败

ES6/React Second item binding fails

本文关键字：二项 绑定 失败 React ES6      更新时间：2023-09-26

这里有一些组件。父组件（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>
    );
  }
}

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

map将把this绑定到函数调用方，也就是数组。用function () {}写入的map中的this是数组而不是组件。

请使用箭头函数，它将保留"词法"this，即周围的this，这是您的组件。

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