React+FluentUI事件冒泡的问题
0
悬赏园豆：60
[待解决问题]
const handleClickOutside = useCallback((event) => {
debugger
if (comboboxRef.current && !comboboxRef.current.contains(event.target)) {
debugger
onHidecombxo();//触发隐藏
}
}, [onHidecombxo]);
useEffect(() => {
document.addEventListener('mouseup', handleClickOutside);
return () => document.removeEventListener('mouseup', handleClickOutside);
}, [handleClickOutside]);
以上代码是屏幕任意地方点击隐藏元素 点击下拉框的时候就不隐藏元素
<div
ref={comboboxRef} // 添加 ref
>
<Combobox
aria-labelledby={comboId}
{...props}
styles={comboBoxStyles} // 直接在组件内调整宽度
className="user-combox"
onClick={(event) => {
event.stopPropagation(); // 阻止事件传播
handcombox(event);
}}
>
{options.map((option) => (
<Option key={option} disabled={option === "Ferret"}
className={styles.combox}
onClick={(event) => {
event.stopPropagation(); // 阻止事件传播
onOptioncomboxdata(option);
}}
>
{option}
</Option>
))}
</Combobox>
</div>
描述：下拉框我明明是放在同一个div里面包裹起来的
我点击下拉都可以不触发隐藏操作 为啥我选择下拉框数据的时候就触发了隐藏操作
所有回答(1)
0
来自AI:
根据你提供的代码，你希望在点击下拉框以外的区域时隐藏元素，但在选择下拉框的数据时不触发隐藏操作。根据你的描述，可能是因为在点击下拉框数据时，事件冒泡导致了隐藏操作被触发。
要解决这个问题，你可以尝试以下方法：
- 在
onClick事件处理程序中使用event.stopPropagation()方法阻止事件冒泡。你已经在代码中正确地使用了event.stopPropagation()来阻止下拉框的点击事件向上冒泡，但可能还需要在选择下拉框数据的Option组件上的onClick事件处理程序中添加相同的阻止冒泡代码。 - 在
handleClickOutside事件处理程序中进行检查时，可以通过判断事件的target属性是否与下拉框数据的Option组件相关来排除该元素。你可以在handleClickOutside函数中添加一个条件来检查event.target是否位于下拉框数据的Option组件内，如果是，则不执行隐藏操作。
下面是修改后的代码示例：
jsx
const handleClickOutside = useCallback((event) => {
if (
comboboxRef.current &&
!comboboxRef.current.contains(event.target) &&
!event.target.classList.contains("option") // 检查事件目标是否位于下拉框的选项内部
) {
onHidecombxo(); // 触发隐藏
}
}, [onHidecombxo]);
useEffect(() => {
document.addEventListener("mouseup", handleClickOutside);
return () => document.removeEventListener("mouseup", handleClickOutside);
}, [handleClickOutside]);
// ...
<Option
key={option}
disabled={option === "Ferret"}
className={styles.combox}
onClick={(event) => {
event.stopPropagation(); // 阻止事件传播
onOptioncomboxdata(option);
}}
{option}
</Option>
请注意，我添加了一个条件检查，以检查事件目标的classList中是否包含名为option的类。你可能需要根据实际情况调整该类名。这样可以通过事件目标来排除选择下拉框数据时隐藏操作被触发的情况。
希望这些修改能够解决你的问题。如果问题仍然存在，请提供更多详细信息，我将尽力帮助你解决。
