如何向Material UI的useAutocomplete传递自定义inputRef

冲突原因 #

useAutocomplete返回的getInputProps()方法内置了必填的ref属性，用于监听输入框聚焦、内容变更、光标位置等核心逻辑，直接在input标签上覆盖ref属性会导致hook的内置逻辑完全失效。

解决方案 #

方案1：通用ref合并（适用所有版本/第三方库实现的useAutocomplete） #

自己实现ref合并逻辑，将内置ref和自定义ref绑定到同一个DOM节点：

1. 先实现ref合并工具函数

function mergeRefs(...refs) {
  return (domNode) => {
    refs.forEach(ref => {
      if (typeof ref === 'function') {
        ref(domNode)
      } else if (ref != null) {
        ref.current = domNode
      }
    })
  }
}

2. 合并ref后绑定到输入框

import { useRef } from 'react'

const CustomAutocomplete = () => {
  // 你的业务自定义ref
  const customInputRef = useRef(null)
  const { getInputProps } = useAutocomplete(/* 你的hook配置参数 */)

  // 获取内置输入框属性
  const inputProps = getInputProps()
  // 合并内置ref与自定义ref
  inputProps.ref = mergeRefs(inputProps.ref, customInputRef)

  return <input {...inputProps} />
}

方案2：MUI useAutocomplete专属方案（适配@mui/material的useAutocomplete） #

MUI的getInputProps方法支持传入自定义ref作为参数，内部会自动完成ref合并，无需手动写合并逻辑：

import { useRef } from 'react'
import useAutocomplete from '@mui/material/useAutocomplete'

const CustomAutocomplete = () => {
  const customInputRef = useRef(null)
  const { getInputProps } = useAutocomplete(/* 你的hook配置参数 */)

  // 直接将自定义ref传入getInputProps即可
  return <input {...getInputProps({ ref: customInputRef })} />
}

注意事项 #

• ❌ 禁止直接覆盖ref：如下写法会直接替换内置ref，导致useAutocomplete失效

<input {...getInputProps()} ref={customInputRef} />

• 合并完成后内置逻辑与自定义ref的业务逻辑可同时正常运行，互不影响。

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