Select 组件正在忽略父 onClick 事件

Question

问题：

我有一个点击事件，它是父组件行为的一部分，但是当直接 selecting 或组件时，onClick 会被忽略，我无法弄清楚为什么事件优先。

我已经在父级和子级上尝试了几层 e.stopPropagation() 和 e.preventDefault() 但没有成功。

这是针对在移动设备上呈现的网站

这是我的问题的简化版本

<div onClick={()=>console.log('Print Something')}>
    <div className='containerStyles' >
        <Select autofocus={false}>
    </div>
</div>

如果我单击 'containerStyles' 的填充或其外部，控制台将打印一些内容，因为触发了 onClick。

但是，如果我直接单击 Select 组件，控制台中不会打印任何内容。

需要什么：

我需要一些关于事件优先级的指导，以及如何让 console.log 在单击其中的任何内容时打印一条消息。即使 select 获得焦点，我只需要确保执行父级的 onClick also。

Answer 1

I need some guidance in the priorities of the events

1。香草盒

Click event 将从子级传播到父级，这是默认行为。

以下示例演示了此行为。即使点击子元素，父元素的点击事件也会被触发。

function App() {
  return (
    <div className="App">
      <div className="box1" onClick={() => console.log("parent")}>
        <div className="box2" />
      </div>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render( < App / > , rootElement);

.App {
  font-family: sans-serif;
  text-align: center;
  display: flex;
}

.box1 {
  background-color: red;
  width: 200px;
  height: 200px;
}

.box2 {
  background-color: black;
  width: 100px;
  height: 100px;
  margin: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root" />

2。 stopPropagation（填充和边框）

如果您想阻止默认行为，您需要使用e.stopPropagation 功能。我在子元素中添加了 padding 和 border 来说明 stopPropagation 工作的条件。

即使您单击边框或填充，传播也会被 stopProgation 功能阻止。

function App() {
  return (
    <div className="App">
      <div
        className="box1"
        onClick={e => {
          console.log("parent");
          e.stopPropagation();
        }}
      >
        <div
          className="box2"
          onClick={e => {
            console.log("child");
            e.stopPropagation();
          }}
        />
      </div>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

.App {
  font-family: sans-serif;
  text-align: center;
  display: flex;
}

.box1 {
  background-color: red;
  width: 200px;
  height: 200px;
}
.box2 {
  background-color: black;
  width: 100px;
  height: 100px;
  margin: auto;
  padding: 15px;
  border: 7px solid yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root" />

Even if the select gets focused I just need to make sure the parent's onClick also gets executed.

如果 click event 不传播，请确保 Select 组件没有 stopPropagation 功能。

最坏的情况，在 parent 组件中定义一个函数并将其作为 prop 传递给子组件。然后在 child 组件中的 onClick 事件中调用此函数。

Select 组件正在忽略父 onClick 事件

Select component is ignoring parent onClick event

reactjs

react-select

问题：

这是我的问题的简化版本

需要什么：

1。香草盒

2。 stopPropagation（填充和边框）