Question

如何将焦点设置在material-ui TextField组件上？

componentDidMount() {
    ReactDom.findDomNode(this.refs.myControl).focus()
}

我已尝试过上面的代码，但它不起作用：（

Answer 1

您可以使用autoFocus属性。

<TextField value="some value" autoFocus />

Answer 2

autoFocus也不适合我，也许因为这是一个在顶级组件加载时没有安装的组件。为了让它发挥作用，我不得不做一些更复杂的事情：

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

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

请注意，由于某些原因，如果没有setTimeout，它将无效。有关详细信息，请参阅https://github.com/callemall/material-ui/issues/1594。

Answer 3

如果您正在使用 material-ui TextField 和 react 功能组件，则可以在 TextField 组件中传递 inputRef。这里的技巧是 if 条件 if(input != null)。

<TextField
    variant="filled"
    inputRef={(input) => {
      if(input != null) {
         input.focus();
      }
    }}
/>

这是一个适合您的工作示例。 CodeSandBox- Material-ui-TextFieldFocus

Answer 4

对于React 16.8.6，您应该使用TextField的inputRef属性设置焦点。我尝试了ref属性，但是它不起作用。

<TextField
  inputRef={input => input.focus()}
/>

Material-ui doc说：

inputRef：使用此属性可将ref回调传递给本机输入组件。

Answer 5

这段代码实际上很好，但有一个缺点，在每次渲染时它都会创建一个新函数。使用 useCallback 很容易解决

<TextField
  inputRef={input => input && input.focus()}
/>

应该

const callbackRef = useCallback((inputElement) => {
     if (inputElement) {
         inputElement.focus();
     }
 }, []);
...
<TextField
  inputRef={callbackRef}
/>

Answer 6

这将在每次渲染时聚焦组件。我尝试过的其他解决方案只在初始时间聚焦元素。

  const inputRef = React.useRef<HTMLInputElement>();
  
  useEffect(() => {
    inputRef.current?.focus();
  }, [inputRef.current]);

  const setTextInputRef = (element: HTMLInputElement) => {
    inputRef.current = element;
  };
   
  return (
    <TextField
      inputRef={setTextInputRef}
    />

Answer 7

对于实质性的ui TextField，您需要在这样的inputProps对象中输入autoFocus的道具。

 <TextField inputProps={{ autoFocus: true }} />

Answer 8

我偶然发现了这些问题，寻找同样问题的解决方案。我找到了关于autoFocus但发现它只在页面首次加载时才有效，而不是在表单提交后。我最终找到它的方法是向孩子ref添加TextField，并在表单上提交调用select()：

<form onSubmit={this.onSubmit}>
            <TextField ref="amountComp" ... />
</form>

和

onSubmit(event: any): void {
    // save form
    (this.refs["amountComp"] as TextField).select();
};

Answer 9

AlienKevin是正确的（将ref回调传递给“ TextField.inputProps”），但是您也可以将元素引用保存在“ this”对象上，以便稍后设置焦点。这是Coffeescript中的一个示例：

TextField
    inputProps:
        ref: (el)=>
            if el?
                @input_element = el

Button
    onClick:=> 
        @input_element.focus()

如何将焦点设置为materialUI TextField？

9 个答案: