加载页面时第一次自动对焦

Question

页面加载时，中间有一个输入文本，我想将焦点放在其中，所以我使用了componentDidMount((并设置了焦点。

componentDidMount() {
this.inputBar.focus();
}
.
.
<input type="text" ref={(element) => { this.inputBar = element; }}>

但它不起作用，因为页面加载时会弹出侧边栏，并将焦点从中心输入转移。我尝试使用componentDidUpdate((，但当我关闭sideBar时，它一次又一次地触发焦点。我只想在第一次加载页面时集中注意力。我是编码新手，请建议一些可以在这里完成的事情。提前谢谢。

Answer 1

你必须创建ref，然后在你的生命周期方法中使用该ref，当你在生命周期方法使用ref时，你忘记了使用current，你的代码将是这样的：

class GroupDetail extends React.Component {
constructor(props) {
super(props);
this.inputRef = React.createRef();
}

componentDidMount(){
this.ref.current.focus()
}
render(){
return(
<input type="text" ref={this.inputRef}/>
)
}
}

Answer 2

如果你想集中一个输入，那么你可以简单地进行

<input type="text" autofocus>

Answer 3

如果您只想在元素挂载(初始渲染(时聚焦元素，只需简单使用autoFocus属性即可。

<input type="text" autoFocus />

或者，如果你想使用componentDidMount并动态控制焦点，你可以使用下面的片段

class App extends React.Component{
componentDidMount(){
this.nameInput.focus();
}
render() {
return(
<div>
<input defaultValue="Won't focus"/>
<input ref={(element) => { this.nameInput = element; }} defaultValue="will focus"/>
</div>
);
}
}

ReactDOM.render(<App />, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>