在组件渲染后，react如何设置聚焦在特定文本字段上?
文档似乎建议使用参考，例如:
在渲染函数的输入字段上设置ref="nameInput"，然后调用:
this.refs.nameInput.getInputDOMNode().focus();
但是我该把它叫什么呢?我在几个地方试过了，但都不行。
当前回答
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();
}
}} />
);
},
其他回答
引用:@Dave对@Dhiraj的回答的评论;另一种方法是在被呈现的元素上使用ref属性的回调功能(在组件第一次呈现之后):
<input ref={ function(component){ React.findDOMNode(component).focus();} } />
更多信息
请注意，这些答案对我来说都没有用material-ui TextField组件。如何将焦点设置为一个materialUI TextField?我费了好大劲才让它起作用:
const focusUsernameInputField = input => {
if (input) {
setTimeout(() => {input.focus()}, 100);
}
};
return (
<TextField
hintText="Username"
floatingLabelText="Username"
ref={focusUsernameInputField}
/>
);
这不再是最好的答案。从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 Hooks / Functional组件和Typescript，你可以使用useRef钩子和HTMLInputElement作为useRef的泛型参数:
import React, { useEffect, useRef } from 'react';
export default function MyComponent(): JSX.Element {
const inputReference = useRef<HTMLInputElement>(null);
useEffect(() => {
inputReference.current?.focus();
}, []);
return (
<div>
<input ref={inputReference} />
</div>
);
}
或者如果使用reactstrap，将inputReference提供给innerRef而不是ref:
import React, { useEffect, useRef } from 'react';
import { Input } from 'reactstrap';
export default function MyComponent(): JSX.Element {
const inputReference = useRef<HTMLInputElement>(null);
useEffect(() => {
inputReference.current?.focus();
}, []);
return (
<div>
<Input innerRef={inputReference} />
</div>
);
}
