Javascript 选择时，react中的onClick事件是否具有优先级？如果是，您如何更改它们？

我有以下JSX代码

<div onClick={() => this.props.callFunction()}>
    <h2>Heading 1</h2>
    <MyComponent1 />
<div>

ProjectWidget

return (
        <div>
            {!isLoading ? (
                <div>
                    <ReactDataGrid
                        columns={this._columns}
                        rowGetter={rowGetter}
                        rowsCount={data.length}
                    />
                </div>
            )
                : (
                    <p>Loading...</p>
                )
            }
        </div>
    );

返回(
{！正在加载(
)
: (
加载

)
}
);

这种行为与React关系不大，而与Javascript本身关系更大。事件传播分为三个阶段

• 俘获
• 目标
• 冒泡

现在，在react中，像

onClick

这样编写的事件会在目标上触发并冒泡。如果要使用捕获阶段，可以指定类似于

onClickCapture

的事件，即将

capture

作为事件的后缀

现在就你而言

<div onClick={() => this.props.callFunction()}>
    <h2>Heading 1</h2>
    <MyComponent1 />
<div>

在这里，单击MyComponent1上的处理程序，而不是将其作为道具传递给组件，除非您在组件中使用它来分配给顶级div，否则此处理程序将无法工作

您需要像这样使用处理程序

render() {
   return (
      <div onClick={this.props.onClick}>P{/* rest content */}</div>
   )
}

render（）{
返回(
P{/*rest内容*/}
)
}

我在CodeSandbox中制作了一个小演示，同时尝试复制您的案例。对我来说，点击在所有三种情况下都有效，即Div、H1和CustomComponent

---

看看这里：

您提到的第一个案例，外部的div one，我似乎仍然无法让onClick工作。它只对你有用。然而，我只是注意到它是在点击和拖动上工作的。奇怪？除非您在MyComponent中指定

P{/*rest content*/}

，否则单击MyComponent1类似的

this.props.callFunction（）}/>

将不起作用。如果我必须提供更多详细信息，您还需要显示MyComponent1代码，但我不希望

this.props.callFunction（）}/>

。我希望在外部div中有一个onClick（）tag@SamarthJuneja，在您的情况下，ReactDataGrid组件可能正在捕获单击事件并停止其传播，请检查itReactDatGrid是否为节点模块。如果它停止了传播，如何覆盖它？

<MyComponent1 onClick={() => this.props.callFunction()}/>

render() {
   return (
      <div onClick={this.props.onClick}>P{/* rest content */}</div>
   )
}