FluentUI组件+React冒泡事件代码冲突问题(点击屏幕任意地方需要隐藏控件点击指定控件又需要显示控件)

一共有三种情况:
第一种 是点击这个120用户展开这个输入框
第二种 是点击这个120用户展开这个输入框 再点击屏幕任意地方触发隐藏事件
第三种 是点击这个120用户 展开这个输入框 再点击下拉框选择下拉数据给120这个用户重新赋值 (这理就跟第二种冲突了 可能调用到了隐藏事件 没法重新赋值 我把这个第二种情况注释掉就可以赋值 但是 点击屏幕任意地方隐藏输入框这个事件就不生效了)

我点击屏幕任意地方算控件外部 那为什么我点击下拉框选择数据的时候难道也算控件外部？？？

  const handleClickOutside = useCallback((event) => {
    if (comboboxRef.current && !comboboxRef.current.contains(event.target)) {
      onHidecombxo();
    }
  }, [comboboxRef]);
  
  useEffect(() => {
    document.addEventListener('mouseup', handleClickOutside);
    return () => document.removeEventListener('mouseup', handleClickOutside);
  }, [handleClickOutside]);



 return (
    <>
      <div className={`nav-drop ${shiftUserComponent ? 'shift-left' : ''}`}
        onClick={handleUserIconClick}
      >
        <text
         onMouseEnter={() => setcomyVisble(true)}
         onMouseLeave={() => setcomyVisble(false)}
        >
        {isTextVisible ? (selectcomboxtext || "120") : ""} 
        </text >
      </div>

      <div className={`nav-userintroduce ${comyVisble ? 'show' : ''}`}>
          <span>北京埃顿科技信息有限公司</span>
      </div>

      {iscomboxvisble&&(
        <div className={styles.root}
        ref={comboboxRef} // 添加 ref
        >
          <div className="combox-input"
          >
          <Input>
          </Input>
          </div>
        
        <div>
        <Combobox
              
              aria-labelledby={comboId}
              {...props}
              styles={comboBoxStyles} // 直接在组件内调整宽度
              className="user-combox"
              onClick={(event) => {
                event.stopPropagation(); // Prevent event from bubbling up
                handcombox(event);
              }}
            >
              {options.map((option) => (
                <Option key={option} disabled={option === "Ferret"}
                className={styles.combox}
                onClick={(event) => {
                  event.stopPropagation(); // Prevent event from bubbling up
                  onOptioncomboxdata(option,event);
                }}

                >
                  {option}
                </Option>
              ))}
            </Combobox>
        </div>
       
        </div>
       )}  
    </>
  );

}export default UserSelectComponets;



解决方案： 由于之前是写在一个组件中的 现在我把他分开来 我写两个组件 一个组件写展示输入框和赋值逻辑  一个组件专门写下拉框选择


父组件

function  Direction(){

  const [isVisible, setIsVisible] = useState(false); // 新增状态来控制显示/隐藏
  const [isSearchVisible, setSearchVisible] = useState(true); // 默认显示
  const [isUserVisible, setUserVisible] = useState(true); // 默认显示
  const [dropdownVisible, setDropdownVisible] = useState(false);
  const [isTextVisible, setIsTextVisible] = useState(true); // 控制文本的显示
  const [isAlertVisble,setIsAlertVisble] = useState(true);
  const [isPersonVisble,setISpersonVisble] = useState(true);
  const [shiftUserComponent, setShiftUserComponent] = useState(false);
  const [iscomboxvisble,setiscomboxvisble] = useState(false);
  const [isearchStatus,setisearchStatus] =  useState(false);
  const [isDropdownVisible, setIsDropdownVisible] = useState(false);
  const [isUserVisble,setisUserVisble] =useState(false);
  const [selectcomboxtext,setselectcomboxtext]= useState("");
  const [isAlertStatus,setisAlertStatus] = useState(false);
  const [isPersonIconClicked,setisPersonIconClicked] = useState(false);
  const [isInputVisble,setisInputVisble] = useState(false);
  const [isInputVisble2,setisInputVisble2] = useState(false);

  const handleHideInput = () => {
    setisInputVisble(false);
    setisInputVisble2(false);
   
  };

  const handleHidecombox=()=>{
   
      setiscomboxvisble(false);
      setSearchVisible(true);
      setIsAlertVisble(true);
  }

  function toggleUserVisibility(){
    setiscomboxvisble(prev => !prev); // 切换输入框的可见性
    setisInputVisble2(true);
    setSearchVisible(false);
    setIsAlertVisble(false);
    setisAlertStatus(true);
    setisearchStatus(true);
    setisUserVisble(false);
    
  }

  const handonOptionboxdata = (selectedOption,event) => {
    event.stopPropagation();
    setselectcomboxtext(selectedOption);
    setiscomboxvisble(false);
    setisUserVisble(true);
    setIsAlertVisble(true);
    setSearchVisible(true);

  };

 const handlecombox = (event)=>{
    event.stopPropagation();
    setSearchVisible(false);
  }

   <SelectedComboxData
         onOptioncomboxdata={handonOptionboxdata}
         handcombox={handlecombox}
         iscomboxvisble={iscomboxvisble}
        />

         <UserSelectComponets
          isUserVisible={isUserVisible}
          isTextVisible={isTextVisible}
          selectcomboxtext={selectcomboxtext}
          shiftUserComponent={shiftUserComponent}
          toggleUserVisibility={toggleUserVisibility}
          isInputVisble2={isInputVisble2}
          onHidecombxo={handleHidecombox}
        


        />
}export default Direction;


子组件

function  UserSelectComponets(props){

 const 
  {
    isInputVisble2,selectcomboxtext,isTextVisible,shiftUserComponent,toggleUserVisibility,onHidecombxo

  } = props;

  const styles = useStyles();
  const inputRef = useRef(null); // Add ref for the user icon

  const [comyVisble,setcomyVisble] = useState(false);



  const handleClickOutside = useCallback((event) => {
    if (inputRef.current && !inputRef.current.contains(event.target)) {
      onHidecombxo();
    }
  }, [inputRef]);
  
  useEffect(() => {
    document.addEventListener('mouseup', handleClickOutside);
    return () => document.removeEventListener('mouseup', handleClickOutside);
  }, [handleClickOutside]);



  const handleUserIconClick = () => {
      toggleUserVisibility();  
  };




  return (
    <>
      <div className={`nav-drop ${shiftUserComponent ? 'shift-left' : ''}`}
        onClick={handleUserIconClick}
      >
        <text
         onMouseEnter={() => setcomyVisble(true)}
         onMouseLeave={() => setcomyVisble(false)}
        >
        {isTextVisible ? (selectcomboxtext || "120") : ""} 
        </text >
      </div>

      <div className={`nav-userintroduce ${comyVisble ? 'show' : ''}`}>
          <span>北京埃顿科技信息有限公司</span>
      </div>

      {isInputVisble2&&(
        <div className={styles.root}
      
        >
          <div className="combox-input"
            // ref={inputRef} // 添加 ref
          >
          <Input>
          </Input>
          </div>
        
        {/* <div>
        <Combobox
              
              aria-labelledby={comboId}
              {...props}
              styles={comboBoxStyles} // 直接在组件内调整宽度
              className="user-combox"
              onClick={(event) => {
                event.stopPropagation(); // Prevent event from bubbling up
                handcombox(event);
              }}
            >
              {userData.company.map((option) => (
                <Option key={option} disabled={option === "Ferret"}
                className={styles.combox}
                onClick={(event) => {
                  event.stopPropagation(); // Prevent event from bubbling up
                  onOptioncomboxdata(option,event);
                }}

                >
                  {option}
                </Option>
              ))}
            </Combobox>
        </div> */}
       
        </div>
       )}  
    </>
  );

}export default UserSelectComponets;



子组件：

function SelectedComboxData(props){

    const {

        handcombox,
        onOptioncomboxdata,
        iscomboxvisble

    } = props;

    const styles = useStyles();
    const comboId = useId("combo-default");

return(

<>

{iscomboxvisble&&(
    <div className={styles.root}>
        <Combobox
              
              aria-labelledby={comboId}
              {...props}
              styles={comboBoxStyles} // 直接在组件内调整宽度
              className="user-combox"
              onClick={(event) => {
                event.stopPropagation(); // Prevent event from bubbling up
                handcombox(event);
              }}
            >
              {userData.company.map((option) => (
                <Option key={option} disabled={option === "Ferret"}
                className={styles.combox}
                onClick={(event) => {
                    event.stopPropagation(); // Prevent event from bubbling up
                    onOptioncomboxdata(option,event);
                  }}
                >
                  {option}
                </Option>
              ))}
            </Combobox>
        </div>


)}

</>

)



}export default SelectedComboxData;