时间戳

首页 > 解决方案 > 从 AntDesign 中选择时停止传播

javascript - 从 AntDesign 中选择时停止传播

问题描述

我有下一个应用程序：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，但是当用户单击选择打开它时，：

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

不应该工作，这就是我插入的原因：

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

..但无论如何 stopPropagation 不起作用，当我单击选择上述功能时也起作用。
问题：如何创建下一个场景？： -- 当用户单击 kson 红色区域以应用console.log('work')时，但何时单击选择时，console.log 应该不可见。

标签： javascript

解决方案

stopPropogation 不会停止默认行为，您需要 preventDefault。您应该使用 onClick 事件而不是 mouseEnter。

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

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

推荐阅读