将焦点设置在功能组件中的特定按钮上的反应方式？

Question

嗨，我是新手，在我的页面加载时，我需要将焦点放在一个按钮上。我正在使用功能组件。我看过类组件的示例，其中使用 componentDidMount 并使用 refs 设置焦点。

这里我使用的是功能组件，也没有 ComponentDidMount .. 如何在页面加载时将功能组件的焦点设置为按钮？

export const SubPageHeader=({prop})=>{
return(
<div>
<input type="button"/>
}
export default SubPageHeader

Answer 1

您可以使用useEffecthook 相当于componentDidMount，

const SubPageHeader=({prop})=>{
  let textInput = null;
  useEffect(()=>{
    textInput.focus();
  })
  return(
    <div>
      <input type="button" value="Button" ref={(button) => { textInput = button; }}/>
    </div>
  )
}

演示