reactjs - React useRef 不适用于 Material UI TextField

Question

为什么 useRef 不能与 Material UI TextField 一起使用，但可以与传统的 html 输入元素一起使用？

用户界面:

我有一个 Textfield 输入元素，在它上面有一个按钮列表(拉丁字母、特殊字符)。我可以在组件第一次呈现时聚焦输入栏，但如果我单击输入上方的其中一个按钮，焦点不会回到输入栏上。

到目前为止我尝试了什么

const Search = (props) => {
  const [searchTerm, setSearchTerm] = useState("");
 

  const inputRef = useRef(null);

  const handleLatinButton = (letter) => {
   inputRef.current.focus();
    setSearchTerm(searchTerm + letter);
  };


  const handleSubmit = (e) => {
    e.preventDefault();
    History.push("/?q=" + searchTerm);
    props.onFormSubmit(searchTerm, optionValue);
    setSearchTerm("");
  };

  useEffect(() => {
    const params = new URLSearchParams(location.search);
    const q = params.get("q");
    setSearchTerm(q);
    inputRef.current.focus();
    
  }, []); // Am I missing something here in the array?

JSX

    <Button letter="č" handleLatinButton={handleLatinButton} />
    <Button letter="ḍ" handleLatinButton={handleLatinButton} />
     ... 
    <form onSubmit={handleSubmit}>
      <TextField
        fullWidth
        label="Search..."
        value={searchTerm}
        onChange={handleChange}
        ref={inputRef}
        autoFocus="true"
        InputProps={{
          endAdornment: (
            <InputAdornment position="start">
              <IconButton type="submit">
                <SearchIcon />
              </IconButton>
            </InputAdornment>
          ),
        }}
      />
    </form>

如果我将 TextField 替换为输入，焦点会在我单击其中一个拉丁按钮后起作用。

Answer 1

这只是 MUI 处理 ref 的方式...

<TextField
    fullWidth
    label="Search..."
    value={searchTerm}
    onChange={handleChange}
  change this >>>  ref={inputRef}
  for this >>> inputRef={inputRef}
    autoFocus="true"
    InputProps={{
      endAdornment: (
        <InputAdornment position="start">
          <IconButton type="submit">
            <SearchIcon />
          </IconButton>
        </InputAdornment>
      ),
    }}
  />

也许为了避免混淆改变引用名称