來自 AntDesign 的 select 上的停止傳播

Question

我有下一個應用程序： https://codesandbox.io/s/compassionate-snow-kjyqv?file=/index.js

 import React from "react"; import ReactDOM from "react-dom"; import "antd/dist/antd.css"; import "./index.css"; import { Select } from "antd"; const { Option } = Select; function handleChange(value) { console.log(`selected ${value}`); } function click() { console.log("click"); } function onMouseEnter(e) { e.stopPropagation(); } ReactDOM.render( <> <div className="click" onClick={click}> <Select onMouseEnter={onMouseEnter} defaultValue="lucy" style={{ width: 120 }} onChange={handleChange} > <Option value="jack">Jack</Option> <Option value="lucy">Lucy</Option> </Select> </div> </>, document.getElementById("container") );

我想，當用戶單擊紅色區域以顯示在控制台中時click單詞，但是當用戶單擊 select 將其打開時，：

 function click() { console.log("click"); }

不應該工作，這就是我插入的原因：

 function onMouseEnter(e) { e.stopPropagation(); }

..但無論如何 stopPropagation 不起作用，當我點擊 select 時，上面的 function 也可以工作。
問題：如何創建下一個場景？： -- 當用戶單擊 kson 紅色區域以應用console.log('work')時，但當單擊 select 時，console.log 應該不可見。

Answer 1

stopPropogation 不會停止默認行為，您需要 preventDefault。 您應該使用 onClick 事件而不是 mouseEnter。

function onMouseEnter(e) {
  e.stopPropagation();
  e.preventDefault();
}

<Select
 onClick={onMouseEnter}
 defaultValue="lucy"
 style={{ width: 120 }}
 onChange={handleChange}
>

Answer 2

您需要在單擊事件中的選擇部分停止傳播，而不是在 mouseEnter

我在這里做了一些改變：

import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Select } from "antd";

const { Option } = Select;

function handleChange(value) {
  console.log(`selected ${value}`);
}
function click() {
  console.log("click");
}
// function for stoping propagation in clikc
function onClickStopProg(e) {
  e.stopPropagation();
}
ReactDOM.render(
  <>
    <div className="click" onClick={click}>
      <Select
      // calling function in onclick event
      // for stoping propagation 
        onClick={onClickStopProg}
        defaultValue="lucy"
        style={{ width: 120 }}
        onChange={handleChange}
      >
        <Option value="jack">Jack</Option>
        <Option value="lucy">Lucy</Option>
      </Select>
    </div>
  </>,
  document.getElementById("container")
);