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

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

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

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

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

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

当前回答

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

设置文本输入参考

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

其他回答

这是正确的方法，如何自动对焦。当你使用callback而不是string作为ref value时，它会被自动调用。你得到了你的ref，而不需要使用getDOMNode触摸DOM

render: function() {
  return <TextInput ref={(c) => this._input = c} />;
},
componentDidMount: function() {
  this._input.focus();
},

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

这不再是最好的答案。从v0.13开始，这个。在某些奇怪的情况下，refs可能在AFTER componentDidMount()运行之前不可用。

只需将autoFocus标签添加到输入字段，如上面的FakeRainBrigand所示。

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

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

更多信息

<input type="text" autoFocus />

总是先尝试简单和基本的解决方案，对我来说很有效。

推荐文章