一共有三种情况:
第一种 是点击这个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;
