如何将焦点设置为materialUI TextField？

Question

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

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

我试过上面的代码,但它不起作用:(

Answer 1

您可以使用该autoFocus属性.

<TextField value="some value" autoFocus />

Answer 2

如果您使用的是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 3

autoFocus也没有为我工作,也许因为这是一个在顶级组件加载时没有安装的组件.为了让它发挥作用,我不得不做更多令人费解的事情:

function AutoFocusTextField(props) {
  const inputRef = React.useRef();

  React.useEffect(() => {
    const timeout = setTimeout(() => {
      inputRef.current.focus();
    }, 100);

    return () => {
      clearTimeout(timeout);
    };
  }, []);

  return <TextField inputRef={inputRef} {...props} />;
}

请注意,由于某种原因,没有它就无法工作setTimeout.有关详细信息,请参阅https://github.com/callemall/material-ui/issues/1594.

Answer 4

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

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

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

Answer 5

对于React 16.8.6，您应该使用inputRefTextField 的属性来设置焦点。我尝试过ref财产，但是行不通。

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

Material-ui doc说：

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

Answer 6

将此属性添加到您的TextField组件中：

inputRef={(input) => input?.focus()}