React函数组件中如何从子组件向父组件传递多个input ref值

核心是配合useImperativeHandle + forwardRef实现需求，ref可以接收任意类型的返回值，你可以把所有需要对外暴露的ref打包成一个对象传给父组件即可。

第一步：修改Child.js #

import { useRef, forwardRef, useImperativeHandle } from 'react'

// 用forwardRef包裹组件，接收父组件传来的ref
const Child = forwardRef((props, ref) => {
  const id1 = useRef('')
  const id2 = useRef('')

  // 把需要暴露给父组件的内容定义在返回对象里
  useImperativeHandle(ref, () => ({
    getId1Value: () => id1.current.value,
    getId2Value: () => id2.current.value,
    // 也可以直接暴露DOM实例：id1Dom: id1.current, id2Dom: id2.current
  }), [])

  return (
    <>
      <input type="text" id="id1" ref={id1} />
      <label htmlFor="id1"> ID 1</label>

      <input type="text" id="id2" ref={id2} />
      <label htmlFor="id2"> ID 2</label>
    </>
  )
})

export default Child

第二步：修改Parent.js #

import { useRef } from 'react'
import Child from './Child'

export default function Parent() {
  // 创建挂载到子组件的ref
  const childRef = useRef(null)

  function onSubmit() {
    const id1Value = childRef.current.getId1Value()
    const id2Value = childRef.current.getId2Value()
    console.log(id1Value, id2Value)
  }

  return ( <>
    <Child ref={childRef} />
    <button onClick={onSubmit}>
      提交
    </button>
  </>)
}

• 注意事项：
  • 原生HTML的for属性在React里要写成htmlFor，避免和JS关键字冲突
  • 只有你主动在useImperativeHandle返回的内容才会被父组件访问到，不会破坏组件封装性

补充：如果你不需要操作输入框DOM，只是要获取输入值，更推荐用状态提升的方式：把两个输入框的状态存在父组件，子组件通过props接收value和onChange回调更新状态，这种方式更符合React的单向数据流设计，避免过度使用ref。

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