MUI Autocomplete预填值后菜单无法关闭问题求助

问题根源确实是onInputChange在组件初始化预填值时被触发，由于预填的输入内容长度大于1，直接调用了setOpen(true)，覆盖了useEffect里的setOpen(false)。

解决方案：添加初始化完成标记，区分预填和用户输入 #

通过新增一个状态标记组件是否完成初始化，让onInputChange仅在初始化完成后（即用户手动输入时）才控制菜单的打开/关闭状态。

修改后的代码如下：

export const MyAutocomplete(props) {
    const [value, setValue] = useState(null)
    const [open, setOpen] = useState(false)
    // 新增：标记是否完成初始化
    const [isInitialized, setIsInitialized] = useState(false)

    // Prefill value
    useEffect(() => {
        if (props.value) {
            const selectedOption = props.options.find(option => option.id === props.value.id)
            if (selectedOption) {
                setValue(selectedOption)
                setOpen(false)
            }
        }
        // 初始化完成，开启用户输入的菜单控制逻辑
        setIsInitialized(true)
    }, [props.value, props.options])

    const handleInputChange = (e, newValue) => {
        // 未初始化时，跳过菜单状态控制
        if (!isInitialized) return;
        
        if (newValue.length > 1) {
            setOpen(true)
        } else {
            setOpen(false)
        }
    }

    const onChange = (e, newValue) => {
        setValue(newValue)
    }

    ...otherFunctionsRedacted

    return (
        <Autocomplete
            value={value}
            open={open}
            onClose={() => setOpen(false)}
            onInputChange={handleInputChange}
            onChange={onChange}
            options={props.options}
            ...otherPropsHere
        />
    )
}

逻辑说明 #

1. 新增isInitialized状态，初始为false，表示组件还在初始化阶段。
2. 在useEffect完成预填值后，将isInitialized设为true，此时才允许onInputChange控制菜单状态。
3. handleInputChange中先判断isInitialized，未初始化时直接返回，避免预填值时触发菜单打开逻辑。

这样就能保证预填值完成后菜单保持关闭，同时不影响用户手动输入时的菜单显示逻辑。

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