Question

我有以下JSX代码

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

如果将点击事件放在h2标记中，它可以正常工作，但是如果我将它放在它外面的div标记中或MyComponent1标记中，则无法正常工作。是因为“ MyComponent”内部已经具有onClick了吗？

编辑： App.js

render()
{
    return(
        <div className="flex-container" style={{"position":"absolute", "width":"90.5%","top":"57px", "right":"0px", "flex": "1","display":"flex"}}>
          <div className="widget" onClick={() => { this.props.viewComponent("project") }}>
            <h2>Project Details</h2>
            <ProjectWidget/>  
          </div>
          <div className="widget" onClick={() => { this.props.viewComponent("resource") }}>
            <h2>Resource Details</h2>
            <ResourceWidget/>
          </div>
        </div>
    )
}

ProjectWidget

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

Answer 1

此行为与React无关，而与Javascript本身有关。事件传播分为三个阶段，

捕获
目标
冒泡

现在，在反应事件中，类似onClick的事件会在目标上触发并冒泡。如果要利用捕获阶段，则可以指定事件onClickCapture，即在事件的后缀后面附加Capture。

现在就您而言

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

onClick是在div上指定的，因此，如果您在标题1中单击，onClick事件将在h2上触发，并冒泡到div处，将被捕获。

现在假设您单击MyComponent1所占据的区域，正如您提到的，该区域在组件中指定了onClick，则事件将由MyComponent1中具有指定处理内容的div捕获。并且除非您在此事件处理程序中stopPropagation，否则该事件将传播到将捕获该事件的父div。

现在来看第三种情况，您可以在MyComponent1上指定onClick，例如

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

这里的onClick不是MyComponent1上的处理程序，而是作为prop传递给Component的，除非您在Component中使用它来分配给顶级div，否则该处理程序将永远无法工作

您的处理程序需要像

一样使用

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

Answer 2

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

在这里看看：https://codesandbox.io/s/jz5qzonjjv

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

2 个答案: