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

Question

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

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

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

标签： reactjsfocus

Answer 1

您可以使用useEffect相当于componentDidMount,

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

演示