Блог

Главная - Вопросы по программированию - Реагировать на useref не добавляя состояние фокуса в поле

Реагировать на useref не добавляя состояние фокуса в поле

#javascript #reactjs

#javascript #reactjs

Вопрос:

Я пытался найти решение для этого, где я хотел бы добавить состояние фокусировки в мое поле ввода. Но, похоже, это не работает:

 const textareaRef = useRef<HTMLInputElement>(null);
...

const handleClick = () => {
        if (textareaRef.current) {
            alert('Field clicked');
            textareaRef.current.focus();
            textareaRef.current.click();
        }
    };

...

<input
     ref={textareaRef}
     onClick={handleClick}
     onFocus={(e) => e.persist()}
     spellCheck="false"
/>

Это не работает, и основная причина заключается в том, чтобы показать мобильную клавиатуру. Смотрите видео здесь, где это не работает https://share.getcloudapp.com/jkuYLqO5 а здесь без предупреждения https://share.getcloudapp.com/wbuKwrLE

Ответ №1:

Я не могу воспроизвести ошибку в браузере рабочего стола. Какой браузер указан в записи экрана?

 function App() {
  const textareaRef = React.useRef();
  const handleClick = () => {
    if (textareaRef.current) {
        console.log('Field clicked');
        textareaRef.current.focus();
    }
  };

  return (
    <div>
      <div onClick={handleClick}>click me to focus input</div>
      <input
       ref={textareaRef}
       onFocus={(e) => e.persist()}
      />
    </div>
  )
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
) 
 <script src="https://unpkg.com/react@16.14.0/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16.14.0/umd/react-dom.production.min.js"></script>

<div id="root"></div>

Комментарии:

1. Да, это действительно странно. Это симулятор для браузера iphone Safari.

2. Ах, я понимаю. Это не в том же компоненте. Щелчок происходит в дочернем компоненте. Как вы думаете, я могу заставить его работать в дочернем компоненте, щелкните, чтобы сфокусировать его? @hackape

3. Большое вам за это спасибо! Это направило меня в правильном направлении 🙂 Я нажал на элемент div, и это сработало

Ответ №2:

Вы можете сделать это в useEffect() . Приведенный ниже компонент высмеивает ваш сценарий. По мере загрузки компонента я заставляю focus() появляться при вводе.

 import React, { useEffect, useRef } from 'react';


const UseRefBasics = () => {
  const refContainer = useRef(null);

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(refContainer.current.value);
  };
  useEffect(() => {
    console.log(refContainer.current);
    refContainer.current.focus();
  });

  return (
    <>
      <form className='form' onSubmit={handleSubmit}>
        <div>
          <input type='text' ref={refContainer} />
        </div>
        <button type='submit'>submit</button>
      </form>
    </>
  );
};

export default UseRefBasics;

Это общий сценарий, который я привел. Вы можете использовать useEffect() и получить фокус при обновлении состояния, предоставив другой аргумент useEffect(()=>{},[state1]) или любым другим способом, который вам нужен.