使用 React Material-UI 自动对焦 TextField

Posted 2023-02-22

【中文标题】使用 React Material-UI 自动对焦 TextField

【英文标题】：Autofocus TextField using React Material-UI

【发布时间】：2017-03-01 04:12:40

【问题描述】：

我用Material-UI TextField

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

【问题讨论】：

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

【参考方案1】：

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

更多信息：https://facebook.github.io/react/docs/tags-and-attributes.html#html-attributes。

【讨论】：

它工作得很好，谢谢！你怎么知道有这样的道具存在？因为我在文档中找不到它：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()