渲染组件后,如何在特定文本字段上设置焦点?
文件似乎建议使用参考文献,例如:
在渲染函数中的"我的输入"字段上设置ref="nameInput"
,然后调用:
this.refs.nameInput.getInputDOMNode().focus();
但我该怎么称呼这个呢?我试过几个地方,但都没法用.
渲染组件后,如何在特定文本字段上设置焦点?
文件似乎建议使用参考文献,例如:
在渲染函数中的"我的输入"字段上设置ref="nameInput"
,然后调用:
this.refs.nameInput.getInputDOMNode().focus();
但我该怎么称呼这个呢?我试过几个地方,但都没法用.
你应该改成componentDidMount
和refs callback
.像这样的东西
componentDidMount(){
this.nameInput.focus();
}
class App extends React.Component{
componentDidMount(){
this.nameInput.focus();
}
render() {
return(
<div>
<input
defaultValue="Won't focus"
/>
<input
ref={(input) => { this.nameInput = input; }}
defaultValue="will focus"
/>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.js"></script>
<div id="app"></div>