在组件渲染后，react如何设置聚焦在特定文本字段上?
文档似乎建议使用参考，例如:
在渲染函数的输入字段上设置ref="nameInput"，然后调用:
this.refs.nameInput.getInputDOMNode().focus();
但是我该把它叫什么呢?我在几个地方试过了，但都不行。
当前回答
<input type="text" autoFocus />
总是先尝试简单和基本的解决方案，对我来说很有效。
其他回答
这一点对我很有用:
<input autoFocus={true} />
自动对焦对我来说效果最好。我需要将一些文本更改为双击文本的输入，所以这是我最终得到的:
<input autoFocus onFocus={this.setCaretToEnd} value={this.state.editTodo.value} onDoubleClick={this.updateTodoItem} />
注意:要修复React在文本开头放置插入符号的问题，请使用以下方法:
setCaretToEnd(event) {
var originalText = event.target.value;
event.target.value = '';
event.target.value = originalText;
}
在这里找到: https://coderwall.com/p/0iz_zq/how-to-put-focus-at-the-end-of-an-input-with-react-js
请注意，这些答案对我来说都没有用material-ui TextField组件。如何将焦点设置为一个materialUI TextField?我费了好大劲才让它起作用:
const focusUsernameInputField = input => {
if (input) {
setTimeout(() => {input.focus()}, 100);
}
};
return (
<TextField
hintText="Username"
floatingLabelText="Username"
ref={focusUsernameInputField}
/>
);
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();
}
}} />
);
},
要将焦点移动到新创建的元素上，您可以将元素的ID存储在状态中，并使用它来设置自动聚焦。如。
export default class DefaultRolesPage extends React.Component {
addRole = ev => {
ev.preventDefault();
const roleKey = this.roleKey++;
this::updateState({
focus: {$set: roleKey},
formData: {
roles: {
$push: [{
id: null,
name: '',
permissions: new Set(),
key: roleKey,
}]
}
}
})
}
render() {
const {formData} = this.state;
return (
<GridForm onSubmit={this.submit}>
{formData.roles.map((role, idx) => (
<GridSection key={role.key}>
<GridRow>
<GridCol>
<label>Role</label>
<TextBox value={role.name} onChange={this.roleName(idx)} autoFocus={role.key === this.state.focus}/>
</GridCol>
</GridRow>
</GridSection>
))}
</GridForm>
)
}
}
通过这种方式，没有任何文本框获得页面加载的焦点(就像我想要的那样)，但是当你按下“添加”按钮来创建一个新记录时，那么这个新记录就会获得焦点。
由于autoFocus不会再次“运行”，除非组件重新挂载，所以我不必费心取消this.state.focus(即当我更新其他状态时，它不会一直窃取焦点)。
