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 用于获取目标元素引用，useEffect 用于在组件呈现时处理焦点。

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

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>
  );
}

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

React: add focus to first child of a component which is a wrapper

reactjs

focus

use-effect