将参数传递给通过props接收的onClick函数，而不绑定此函数

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

我不想this （组件B上下文）绑定到函数，我只想将id传递给_onDelete 。

我尝试了以下方法：

1. 箭头功能：

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

context在_onDelete更改为B，而我没有访问this.props.deleteItem了。

2. 通过事件传递：

    return <div onClick={onDelete} itemId={id}>Hello</div>; _onDelete(event) { this.props.deleteItem(event.target.itemId); } 

event.target.itemId undefined

我怎样才能通过itemId到A的功能，无需绑定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>;
   }
}

Answer 2

您的语法不太正确，但是我想这是一个问题，不是您的实际代码中的问题。 如果您不想调用.bind(this) ，则可以将箭头函数传递给onDelete ，该函数调用_onDelete ：

<B onDelete={id => this._onDelete(id)}/>

更好的解决方案是直接传递this.props.deleteItem ，如果这是_onDelete所调用的：

<B onDelete={this.props.deleteItem}/>

在B您还必须传递一个自定义函数：

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