如何将焦点设置到 materialUI TextField？

Question

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

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

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

Answer 1

您可以使用 autoFocus 属性。

<TextField value="some value" autoFocus />

Answer 2

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 3

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

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

Material-ui doc 说：

inputRef: Use this property to pass a ref callback to the native input component.

Answer 4

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

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

Button
    onClick:=> 
        @input_element.focus()

Answer 5

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

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

Answer 6

如果您正在使用 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 7

这段代码其实很好，但有一个缺点，在每次渲染时都会创建一个新函数。使用 useCallback

很容易解决

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

应该是

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

Answer 8

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

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

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

Answer 9

我正在使用此解决方案，适用于受 https://gist.github.com/carpben/de968e377cbac0ffbdefe1ab56237573

启发的文本字段


const useFocus = (): [any, () => void] => {
    const htmlElRef: MutableRefObject<any> = useRef<HTMLDivElement>();
    const setFocus = (): void => {
        if (!htmlElRef || !htmlElRef.current) return
        const div = htmlElRef.current as HTMLDivElement
        if (!div) return
        const input = div.querySelector("input")
        if (input) input.focus()
    }
    return [htmlElRef, setFocus];
};


export function MyComp() {
  const [ref, setFocus] = useFocus()
  
  // use setFocus() to focus the input field

  return <Input ref={ref} />
}

Answer 10

 const handleClick =  () => {
   inputRef.current.firstChild.focus();
   inputRef.current.firstChild.placeholder = '';
  }
  <InputBase
        value={value}
        ref={inputRef}
        placeholder="search" />
    <Button onClick={handleClick}>Click</Button>

Answer 11

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

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

如何将焦点设置到 materialUI TextField？

How to set focus to a materialUI TextField?

material-ui