Блог

почему useRef не работает с текстовым полем пользовательского интерфейса Material, но отлично работает с традиционным элементом ввода html?

Пользовательский интерфейс:

У меня есть элемент ввода текстового поля, а над ним у меня есть список кнопок (буквы латинского алфавита, специальные символы). Я могу сфокусировать панель ввода при первом рендеринге компонента, но если я нажму на одну из кнопок над входом, фокус не вернется на панель ввода.

Что я пробовал до сих пор

 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>
  

Если я заменяю текстовое поле на ввод, фокус срабатывает после нажатия на одну из латинских кнопок.

Это просто способ, которым MUI обрабатывает ссылку…

 <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>
      ),
    }}
  />
  

возможно, чтобы избежать путаницы, измените имя ссылки