如何设置焦点在一个输入字段后呈现?

在组件渲染后，react如何设置聚焦在特定文本字段上?

文档似乎建议使用参考，例如:

在渲染函数的输入字段上设置ref="nameInput"，然后调用:

this.refs.nameInput.getInputDOMNode().focus();

但是我该把它叫什么呢?我在几个地方试过了，但都不行。

当前回答

阅读几乎所有的答案，但没有看到getRenderedComponent().props.input

设置文本输入参考

this.refs.username.getRenderedComponent () .props.input.onChange(”);

其他回答

您可以将该方法调用放在呈现函数中。或者在生命周期方法中，componentDidUpdate

最简单的答案是在输入文本元素中添加ref="some name"并调用下面的函数。

componentDidMount(){
   this.refs.field_name.focus();
}
// here field_name is ref name.

<input type="text" ref="field_name" />

我也有同样的问题，但我也有一些动画，所以我的同事建议使用window.requestAnimationFrame

这是元素的ref属性:

ref={(input) => {input && window.requestAnimationFrame(()=>{input.focus()})}}

引用:@Dave对@Dhiraj的回答的评论;另一种方法是在被呈现的元素上使用ref属性的回调功能(在组件第一次呈现之后):

<input ref={ function(component){ React.findDOMNode(component).focus();} } />

更多信息

根据更新后的语法，你可以使用this.myRref.current.focus()

推荐文章