代码之家 › 专栏 › 技术社区 › Sam

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

use-effect focus reactjs

Sam · 技术社区 · 3 年前

如果我有这样的组件

const Comp = ({children}) => {

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

}

然后像这样称呼它

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

当组件渲染时,如何将焦点更改为此组件的第一个输入字段,从 Comp 组成部分

理想情况下,我想要一个useEffect函数或类似的东西

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

1 回复 | 直到 3 年前

Wei Su 3 年前

你需要两样东西, useRef 和 useEffect , useRef 用于获取目标元素ref,以及 使用效果 用于在组件渲染时处理聚焦。

children 在一个组件中,props是一个数组,所以你可以操纵它,你可以使用 index 以获得 child 元素,然后调用 focus() 由中的ref 使用效果 :

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