Reactjs 如何设置组件html标记的焦点

当我的功能组件加载时，我需要在它的标签上设置焦点。我不能使它正常工作。请帮忙！下面是我的代码； Detail.js

import React,{useState,useEffect} from 'react';
const Detail=({course})=>{
const [myfocus]=useState(null);
useEffect(() => {
    setState({
    this.myfocus.focus(); //? how to set id myfocus to this.myfocus.focus()
  });

return (
   <div>
    <h4  tabindex="0"   id="myfocus">
     {course.SUBJECT} {course.CATALOG_NBR}
     </h4>

</div>
);

import React，{useState，useffect}来自“React”；
常量详细信息=（{course}）=>{
常量[myfocus]=useState（null）；
useffect（（）=>{
设定状态({
this.myfocus.focus（）；/？如何将id myfocus设置为this.myfocus.focus（）
});
返回(
{course.SUBJECT}{course.CATALOG_NBR}
);

})；

---

导出默认详细信息；

我们在React中有

自动对焦

属性，因此您可以尝试

但您也可以使用ref解决此问题：

const h4 = useRef()

useEffec(() => 
    h4.current.focus()
)[];

return( <h4 ref={h4} /> )

const h4=useRef（）
useEffec（（）=>
h4.current.focus（）
)[];
返回（）

---

您是对的，tabIndex（在React中使用camel）h4元素可能需要使用。焦点是什么意思？你想做什么？为什么设置状态？这回答了你的问题吗？使用焦点和tabIndex应该用于交互元素，比如按钮。但是如果你需要，它也可以用于其他HTML元素，比如文章列表中的

要向其中添加焦点操作。我不明白为什么在useEff（）中需要[]？删除它后，它会工作。useEffect（（）=>h4.current.focus（））；我已添加[]以将useEffect用作组件didmount（），如果setTimeout或onLoad对您不起作用，则可以添加它。如果同一组件中没有其他逻辑（不会多次渲染），则不带数组的useEffect将正常工作，但如果有其他内容，则每次都会附加焦点。