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="ḍ&quot; 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，则在单击其中一个拉丁按钮后焦点有效。

标签： reactjsuser-interfaceinputtextfield