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

我有以下两个部分：

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

\u onDelete

中的

context

更改为B，我再也无法访问

这个.props.deleteItem

路过事件：

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

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

返回Hello；
_onDelete（事件）{
this.props.deleteItem（event.target.itemId）；
}

event.target.itemId

是

未定义的

如何将

itemId

传递给

A

的函数，而不将

此

绑定到它？

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

_onDelete=（id）=>{
此.props.deleteItem（id）；
}
render（）{
返回；
}
}

这样_onDelete就可以在上下文中使用。就这样叫它B

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

B类扩展组件{
设id=this.props.item.id；
render（）{
返回this.props.onDelete（id）}>Hello；
}
}

A类扩展组件{
_onDelete=（id）=>{
此.props.deleteItem（id）；
}
render（）{
返回；
}
}

这样_onDelete就可以在上下文中使用。就这样叫它B

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

B类扩展组件{
设id=this.props.item.id；
render（）{
返回this.props.onDelete（id）}>Hello；
}
}

您的语法不太正确，但我想这是这里的问题，而不是实际代码中的问题。如果不想调用

.bind（this）

，则可以将一个箭头函数传递给

onDelete

，该函数调用

\u onDelete

：

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

在

B

中，您还必须传递一个自定义函数：

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

return-onDelete（id）}>Hello；

您的语法不太正确，但我想这是这里的问题，而不是实际代码中的问题。如果不想调用

.bind（this）

，则可以将一个箭头函数传递给

onDelete

，该函数调用

\u onDelete

：

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

在

B

中，您还必须传递一个自定义函数：

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

return-onDelete（id）}>Hello；

您的代码与我的第一种方法之间的唯一区别在于，您使用了一个箭头函数来删除。这是如何解决问题的？当将_onDelete写为arrow函数时，上下文仍然是A的上下文，并且它在组件B中成为具有上下文A的绑定函数。当您传递非arrow函数时，上下文仍然未定义，这就是它创建问题的原因。Javascript是词汇作用域语言，arrow函数保留外部作用域的上下文。您的代码和我的第一种方法之间的唯一区别是您将_onDelete函数设置为arrow函数。这是如何解决问题的？当将_onDelete写为arrow函数时，上下文仍然是A的上下文，并且它在组件B中成为具有上下文A的绑定函数。当您传递非arrow函数时，上下文仍然未定义，这就是它创建问题的原因。Javascript是词法范围的语言，arrow函数保留外部范围的上下文