Javascript 在React中单击div时传递事件参数

我的问题是关于单击

div

时

React

中的

onClick

事件的流程

我的应用程序有一个

ParentComponent

，它调用

ChildComponent

，然后为

ParentComponent

中的

props.options

数组的每个成员创建一个

div

我有两个问题，分别是：

单击

div

时，如何将

onClick

事件传递到此组件

div

如何知道是哪个

选项创建了它？我的意思是问，
this.props.options
数组的一些迭代，比如说，
optionA
创建的，比如说，
divA
，
divA
如何知道它是由
optionA
创建的，而不是
optionB
？这是由React内部完成的吗

这是我的父组件

interface ParentComponentState {
  ..
  ..
}

export interface ParentComponentProps {
 ...
 ...
}

export class ParentComponent extends React.Component<ParentComponentProps, ParentComponentState> {
  public state: ParentComponentState = {
    ...
  };

  constructor(props) {
    super(props);
  }

  private handleClick = (item) => {
    console.log(item);
  }

  public render(): JSX.Element {

    return (
      <>
          <SomeButtonComponent>
            { this.props.options.map((item: any, index: any) => (
              <ChildComponent
                onClick={ () => this.handleClick(item) }
              />
            )) }
          </SomeButtonComponent>
      </>
    );
  }
}

export function ChildComponent(props: IChildComponent): JSX.Element {
  return
    (
      <div
        ref={ ... }
        className={ someClassName }
        dangerouslySetInnerHTML={ { __html: someHTML } }
        onClick={ props.onClick }
      />
    )
}

接口父组件状态{
..
..
}
导出接口ParentComponentProps{
...
...
}
导出类ParentComponent扩展了React.Component{
公共状态：ParentComponentState={
...
};
建造师（道具）{
超级（道具）；
}
私有handleClick=（项目）=>{
控制台日志（项目）；
}
public render（）：JSX.Element{
返回(
{this.props.options.map（（项：any，索引：any）=>(
this.handleClick（项目）}
/>
)) }
);
}
}

这是我的子组件

interface ParentComponentState {
  ..
  ..
}

export interface ParentComponentProps {
 ...
 ...
}

export class ParentComponent extends React.Component<ParentComponentProps, ParentComponentState> {
  public state: ParentComponentState = {
    ...
  };

  constructor(props) {
    super(props);
  }

  private handleClick = (item) => {
    console.log(item);
  }

  public render(): JSX.Element {

    return (
      <>
          <SomeButtonComponent>
            { this.props.options.map((item: any, index: any) => (
              <ChildComponent
                onClick={ () => this.handleClick(item) }
              />
            )) }
          </SomeButtonComponent>
      </>
    );
  }
}

export function ChildComponent(props: IChildComponent): JSX.Element {
  return
    (
      <div
        ref={ ... }
        className={ someClassName }
        dangerouslySetInnerHTML={ { __html: someHTML } }
        onClick={ props.onClick }
      />
    )
}

导出函数ChildComponent（props:IChildComponent）：JSX.Element{ 返回 ( ) }

---

关于传递

事件的第一个问题，您可以这样做：


export class ParentComponent extends React.Component<ParentComponentProps, ParentComponentState> {
  public state: ParentComponentState = {
    ...
  };

  constructor(props) {
    super(props);
  }

  private handleClick = (item) => (event) => { // This is called function currying
    console.log(item);
    console.log(event);
  }

  public render(): JSX.Element {

    return (
      <>
          <SomeButtonComponent>
            { this.props.options.map((item: any, index: any) => (
              <ChildComponent
                onClick={ this.handleClick(item) }
              />
            )) }
          </SomeButtonComponent>
      </>
    );
  }
}


导出类ParentComponent扩展了React.Component{
公共状态：ParentComponentState={
...
};
建造师（道具）{
超级（道具）；
}
私有handleClick=（项）=>（事件）=>{//这称为函数转换
控制台日志（项目）；
console.log（事件）；
}
public render（）：JSX.Element{
返回(
{this.props.options.map（（项：any，索引：any）=>(
)) }
);
}
}

对于你的第二个问题，如果你想在
ChildComponent
中知道是哪些选项创建了它，你必须将另一个道具传递给
ChildComponent
，并将
选项作为道具发送到
ChildComponent
中并在那里使用它，我会尽我所能回答你的问题，这就是：

谁控制调用此调用时参数的顺序

如果您这样做，React只会说给我一个函数，该函数接受一个参数，当
事件
例如
单击事件
发生时，我将使用调用您的函数，并将
事件
对象作为其参数发送

因此，这取决于你，如果你想有更多的论据，你需要知道如何通过以下方式来回避这些论据：

 handleClick = (item) => (event) => {
    console.log(item);
    console.log(event);
  }

   <ChildComponent onClick={ this.handleClick(item) } />

当您执行类似操作，然后在
onClick
props中调用句柄时，单击如下所示：

 handleClick = (item) => (event) => {
    console.log(item);
    console.log(event);
  }

   <ChildComponent onClick={ this.handleClick(item) } />

这就是React想要的（一个接受参数并在事件发生时调用它的函数）

看

浏览器如何知道只传入第二个参数作为实际事件？
正如我上面所说，React在浏览器事件系统之上有自己的事件系统（请阅读相关内容）

因此，这个问题的答案是：它不需要，React只需要一个带on参数的函数（为了更好地理解解决方法，您需要了解javascript
closure
，如果您想使用
currying
或javascript
bind
函数，如果您使用绑定）

合同在哪里

您可以在代码中定义

div中的onClick函数是否需要回调函数，其中第二个参数是实际事件

不需要，它只需要一个带一个参数的函数，如果在使用
bind
函数时让您感到困惑，只需阅读一点

这个定义在哪里？
它是
类
参数之一，您需要了解它，直到理解它为止
（我建议使用函数组件，这样您就不需要使用javascript中的
这个
概念）

onClick={（）=>this.handleClick（item）}
=>
onClick={（event）=>this.handleClick（item，event）}
@Derek谢谢Derek！你的回答很有帮助。但请你把它作为一个答案加上。另外，谁将事件作为参数传递？在
onClick={（event）=>this.handleClick（item，event）}
中，本机浏览器
MouseEvent
包含有关单击的所有信息。当您单击
ChildComponent
中定义的
div
元素时，浏览器会将该事件对象发送给您设置为处理它的函数。在本例中，匿名内联函数变成了
props.onClick
@Derek，我尝试了您建议的更改并看到了事件。再次感谢！但是，我尝试将函数签名设置为private handleClick=（item，event，event1，event2）=>{…}，正如预期的那样，只有参数事件具有实际事件。我的问题是：浏览器如何知道只传递第二个参数作为实际事件？合同在哪里？onClick函数是否需要回调函数，其中第一个参数是item，第二个是实际事件？对于这些问题，我深表歉意-因为我看不到呼叫，我发现很难将其可视化。我建议您阅读有关鼠标和键盘事件处理的MDN文档。感谢您的回复。我确实查找了函数currying，并理解
事件
是
handleClick
函数的一个参数。但是，谁将
事件
参数传递给