react-select中CustomSingleValue内按钮无法点击的问题排查与解决

我尝试给react-select的CustomSingleValue组件添加一个能触发alert的编辑按钮，但按钮无法正常点击——点击时反而会打开下拉菜单，用e.stopPropagation()也解决不了。但CustomOption里用完全相同的代码，按钮却能正常工作。这是什么原因？该怎么修复？

相关代码示例 #

// 无法正常工作的CustomSingleValue
const CustomSingleValue = (props) => {
  const handleEdit = (e) => {
    e.stopPropagation();
    alert("This I can't click");
  };

  return (
    <components.SingleValue {...props}>
      <div className="test">
        <span>{props.children}</span>
        <div>
          <button onClick={handleEdit}>Edit</button>
        </div>
      </div>
    </components.SingleValue>
  );
};

// 可正常工作的CustomOption
const CustomOption = (props) => {
  const handleEdit = (e) => {
    e.stopPropagation();
    alert("This is working like I want");
  };

  return (
    <components.Option {...props}>
      <div className="test">
        <span>{props.children}</span>
        <button onClick={handleEdit}>Edit</button>
      </div>
    </components.Option>
  );
};

export default function App() {
  const option = [
    { value: "Spring", label: "Spring" },
    { value: "Summer", label: "Summer" },
    { value: "Autumn", label: "Autumn" },
    { value: "Winter", label: "Winter" },
  ];

  return (
    <div className="App">
      <Select
        className="dropdown"
        options={option}
        placeholder="Click on a option and then try to click the edit button"
        components={{ SingleValue: CustomSingleValue, Option: CustomOption }}
      />
    </div>
  );
}

问题原因 #

react-select的SingleValue组件外层容器被绑定了触发下拉菜单展开/收起的点击事件，且这个逻辑是通过内部事件系统实现的（并非单纯的事件冒泡）。你在按钮里用e.stopPropagation()只能阻止事件向父元素冒泡，但拦不住react-select顶层容器的事件监听（大概率是事件委托实现）。而Option组件的上下文里没有这个全局下拉触发逻辑，所以按钮能正常响应点击。

修复方案 #

有两种可靠的修复方式：

方式一：在按钮事件中同时阻止默认行为 #

react-select的下拉触发可能监听了mousedown事件，或者需要阻止默认行为来中断后续逻辑。修改按钮的点击处理函数：

const CustomSingleValue = (props) => {
  const handleEdit = (e) => {
    e.stopPropagation();
    e.preventDefault(); // 新增阻止默认行为
    alert("This works now!");
  };

  return (
    <components.SingleValue {...props}>
      <div className="test">
        <span>{props.children}</span>
        <div>
          <button onClick={handleEdit}>Edit</button>
        </div>
      </div>
    </components.SingleValue>
  );
};

方式二：覆盖SingleValue的onClick属性 #

直接解构掉props中的onClick，避免父组件的点击事件触发下拉：

const CustomSingleValue = (props) => {
  const handleEdit = (e) => {
    alert("This works too!");
  };

  // 过滤掉原有的onClick属性
  const { onClick, ...restProps } = props;

  return (
    <components.SingleValue {...restProps}>
      <div className="test">
        <span>{props.children}</span>
        <div>
          <button onClick={handleEdit}>Edit</button>
        </div>
      </div>
    </components.SingleValue>
  );
};

这两种方法都能让按钮正常触发alert，不会再打开下拉菜单。

内容的提问来源于stack exchange，提问作者ColtonSomeone