React中DropdownButton内MenuItem嵌套的复选框点击无响应问题求助

我之前也碰到过一模一样的问题！核心原因是Dropdown.Item默认会拦截点击事件：当你点击内部的Form.Check时，事件会冒泡到外层的Dropdown.Item，Dropdown.Item会触发下拉菜单关闭的逻辑，同时干扰了Form.Check的onChange事件执行。而把Form.Check放在Dropdown外部时，没有这个事件拦截，所以功能正常。

给你两个实用的解决方案：

方案1：阻止事件冒泡 #

在Form.Check的onChange回调里添加event.stopPropagation()，让事件不会传递到外层的Dropdown.Item，这样既不会触发下拉关闭，也能保证复选框的逻辑正常执行：

<Dropdown.Item>
  <Form.Check
    name={"title"}
    type={"switch"}
    defaultChecked={props?.searchIn?.title}
    onChange={(e) => {
      e.stopPropagation(); // 阻止事件冒泡
      props?.handleSearchIn(e);
    }}
  />
</Dropdown.Item>

方案2：修改Dropdown.Item的渲染类型 #

默认Dropdown.Item会被渲染成可点击的<button>或<a>标签，我们可以通过as属性把它改成普通的<div>，消除它的默认点击行为：

<Dropdown.Item as="div">
  <Form.Check
    name={"title"}
    type={"switch"}
    defaultChecked={props?.searchIn?.title}
    onChange={props?.handleSearchIn}
  />
</Dropdown.Item>

这两种方案都能解决问题，你可以根据自己的项目需求选择其中一种～

内容的提问来源于stack exchange，提问作者Şahin Ersever