来自 AntDesign 的 select 上的停止传播

Question

I have the next application: 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") );

I want, when user clicks on red area to appear in console the word click , but when user will click on select to open it, the:

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

shouldn't work, this is why i inserted:

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

..but anyway the stopPropagation does not work and when i clicks on select the above function also work.
Question: How to create the next scenario?: -- when user clic kson red area to apply console.log('work') , but when will click on select the console.log should not be visible.

Answer 1

stopPropogation won't stop default behavior, you need preventDefault. You should use onClick event instead of mouseEnter.

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

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

Answer 2

you need to stopPropagation in selection part in click event not in mouseEnter

i do some changes here:

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")
);