使用 React Material-UI 自动对焦 TextField答案

【问题标题】：Autofocus TextField using React Material-UI使用 React Material-UI 自动对焦 TextField
【发布时间】：2017-03-01 04:12:40
【问题描述】：

我用Material-UI TextField

我想实现自动对焦，但我无法通过不以编程方式设置 autofocus=true 来从标记中实现它。有什么帮助吗？

【问题讨论】：

How to set focus to a materialUI TextField?的可能重复

标签： reactjs material-ui

【解决方案1】：

你可以这样做：<TextField autoFocus></TextField>。

【讨论】：

它工作得很好，谢谢！你怎么知道有这样的道具存在？因为我在文档中找不到它：material-ui.com/#/components/text-field
这是内置在 React 中的

【解决方案2】：

由于某种原因，这对我不起作用（可能是因为它位于顶层组件挂载时不可见的组件中）。我必须做一些更复杂的事情才能让它工作：

const focusUsernameInputField = input => {
  if (input) {
    setTimeout(() => {input.focus()}, 100);
  }
};

return (
  <TextField
    hintText="Username"
    floatingLabelText="Username"
    ref={focusUsernameInputField}
  />
)

欲了解更多信息，请参阅https://github.com/callemall/material-ui/issues/1594。

【讨论】：

"...该元素必须可见才能获得焦点。以下类型的元素如果未禁用，则可以获得焦点：输入、选择、文本区域、按钮和对象。锚点是可聚焦的如果它们具有 href 或 tabindex 属性。area 元素是可聚焦的，如果它们位于命名地图内，具有 href 属性，并且有使用地图的可见图像。所有其他元素仅基于它们的 tabindex 属性和可见性是可聚焦的。 "：来自api.jqueryui.com/focusable-selector

【解决方案3】：

我只是简单地将输入的 ref 放入状态

<TextInput inputRef={el => { this.setState({form: el}) }}/>

然后您可以将焦点设置到任何地方的输入。

this.state.form.focus()

【讨论】：