React：将焦点添加到作为包装器的组件的第一个子级

Question

如果我有类似的组件

const Comp = ({children}) => {

    //some code
    return (
        <div> 
            {children}
        </div>
    )

}

然后像这样称呼它

<Comp>
    <input onChange={...} />
    <input onChange={...} />
</Comp>

如何在组件渲染时从Comp 组件内将焦点更改到该组件的第一个输入字段。

理想情况下，我希望有一个 useEffect 函数或类似的东西

useEffect(() => {
   thisComponent.firstChild.focus()
})

Answer 1

你需要两个东西，useRef 和 useEffect，useRef 用于获取目标元素 ref，useEffect 用于在组件渲染时处理焦点。

组件props中的children是一个数组，所以你可以对其进行操作，你可以使用index获取你想要设置ref的child元素，然后通过@987654331中的ref调用focus() @：

function App(props) {
  const firstChildRef = useRef(null);

  useEffect(() => {
    if(firstChildRef.current) {
      firstChildRef.current.focus()
    }
  }, [firstChildRef])

  return (
    <div className="App">
      {props.children.map((child, index) => {
        if(index === 0) {
          return {...child, ref: firstChildRef};
        }
        return child;
      })}
    </div>
  );
}