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

Question

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

设置焦点

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

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

Answer 1

您可以使用 useEffect 而不是 componentDidMount 在功能组件中做同样的事情。

在您的按钮元素上使用 ref 并在 useEffect 方法中使用它来对焦点按钮元素做出反应

Answer 2

对于功能组件，您可以使用挂钩，您可以使用 useEffect，它作为功能组件的 ComponentDidMount 工作 component.For 更多详细信息，请参阅此 link： https://reactjs.org/docs/hooks-state.html

Answer 3

你可以使用 useEffect 钩子，相当于 componentDidMount,

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

Demo

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

react way of setting focus on a particular button in functional component?

focus

reactjs