javascript - 将参数传递给通过 props 接收的 onClick 函数而不绑定(bind) this

Question

我有以下两个组件:

class A extends Component {
   _onDelete(id) {
      this.props.deleteItem(id);
   }
   render() {
      return <B onDelete={this._onDelete}/>;
   }
}


class B extends Component {
   const onDelete= {this.props};
   let id = this.props.item.id;
   render() {
     return <div onClick={onDelete}>Hello</div>;
   }
}

我不想绑定(bind)this (组件 B 上下文)到函数，我只想传递 id至_onDelete 。

我尝试了这些方法:

1. 箭头函数:

    return <div onClick={() => onDelete(id)}>Hello</div>;
   

context在_onDelete更改为 B，我无权访问 this.props.deleteItem不再了。

经过事件:

return <div onClick={onDelete} itemId={id}>Hello</div>;

_onDelete(event) {
   this.props.deleteItem(event.target.itemId);
}

event.target.itemId是 undefined

我怎样才能通过itemId至A的功能，无绑定(bind)this到它？

Answer 1

class A extends Component {
   _onDelete = (id) => {
      this.props.deleteItem(id);
   }
   render() {
      return <B onDelete={this._onDelete}/>;
   }
}

这样 _onDelete 将在 A 上下文中可用。在B中这样称呼就可以了

class B extends Component {
   let id = this.props.item.id;
   render() {
     return <div onClick={() => this.props.onDelete(id)}>Hello</div>;
   }
}