在组件渲染后，react如何设置聚焦在特定文本字段上?
文档似乎建议使用参考，例如:
在渲染函数的输入字段上设置ref="nameInput"，然后调用:
this.refs.nameInput.getInputDOMNode().focus();
但是我该把它叫什么呢?我在几个地方试过了，但都不行。
当前回答
React 16.3增加了一个新的方便的方法来处理这个问题，在组件的构造函数中创建一个ref，并像下面这样使用它:
class MyForm extends Component {
constructor(props) {
super(props);
this.textInput = React.createRef();
}
componentDidMount() {
this.textInput.current.focus();
}
render() {
return(
<div>
<input ref={this.textInput} />
</div>
);
}
}
有关React的更多细节。createRef，你可以在React博客中查看这篇文章。
更新:
从React 16.8开始，可以在函数组件中使用useRef钩子来实现相同的结果:
import React, { useEffect, useRef } from 'react';
const MyForm = () => {
const textInput = useRef(null);
useEffect(() => {
textInput.current.focus();
}, []);
return (
<div>
<input ref={textInput} />
</div>
);
};
其他回答
这不再是最好的答案。从v0.13开始，这个。在某些奇怪的情况下，refs可能在AFTER componentDidMount()运行之前不可用。
只需将autoFocus标签添加到输入字段，如上面的FakeRainBrigand所示。
你可以在这里查看更新的版本
componentDidMount() {
// Focus to the input as html5 autofocus
this.inputRef.focus();
}
render() {
return <input type="text" ref={(input) => { this.inputRef = input }} />
})
React文档现在有一个专门的部分。https://facebook.github.io/react/docs/more-about-refs.html#the-ref-callback-attribute
render: function() {
return (
<TextInput
ref={function(input) {
if (input != null) {
input.focus();
}
}} />
);
},
这是正确的方法，如何自动对焦。当你使用callback而不是string作为ref value时，它会被自动调用。你得到了你的ref，而不需要使用getDOMNode触摸DOM
render: function() {
return <TextInput ref={(c) => this._input = c} />;
},
componentDidMount: function() {
this._input.focus();
},
在尝试了上面的许多选项后，没有成功，我发现这是因为我禁用了输入，然后启用了输入，导致焦点丢失。
我有一个道具sendingAnswer将禁用输入，而我轮询后端。
<Input
autoFocus={question}
placeholder={
gettingQuestion ? 'Loading...' : 'Type your answer here...'
}
value={answer}
onChange={event => dispatch(updateAnswer(event.target.value))}
type="text"
autocomplete="off"
name="answer"
// disabled={sendingAnswer} <-- Causing focus to be lost.
/>
一旦我拆除了瘫痪的道具，一切又开始工作了。
