如何设置materialUI文本字段的焦点？

Question

如何设置材质ui文本字段组件的焦点？

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

我已经尝试了上述代码，但不起作用：(

Answer 1

自动聚焦也不适用于我，也许是因为这是一个在顶级组件加载时没有挂载的组件。我不得不做一些更复杂的事情来让它工作：

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

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

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

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

请注意，由于某些原因，如果没有设置超时，它将无法工作。有关更多信息，请参阅https://github.com/callemall/material-ui/issues/1594.

Answer 2

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

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

材料-ui doc说：

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

Answer 3

您可以使用自动聚焦属性。

<TextField value="some value" autoFocus />