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。

我试过这些方法：

箭头功能：

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

context

_onDelete

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的函数，而不将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的{{1}}：

_onDelete

更好的解决方案是直接传递<B onDelete={id => this._onDelete(id)}/>，如果那就是this.props.deleteItem正在调用的那样：

_onDelete

在<B onDelete={this.props.deleteItem}/>中，您还必须传递自定义函数：

将参数传递给onClick函数通过道具接收而不绑定它

2 个答案: