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

您好，我是新来反应的，在我的页面加载上，我需要将焦点放在按钮上。我正在使用功能组件。我看过类组件的示例，其中使用 componentDidMount 并使用 refs 设置焦点。

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

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

您可以利用useEffect钩子相当于componentDidMount,

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

Demo https://stackblitz.com/edit/react-csx8d9