Блог

Главная - Вопросы по программированию - Сохраняйте текстовое поле в фокусе при нажатии на выпадающий список в react

Сохраняйте текстовое поле в фокусе при нажатии на выпадающий список в react

#javascript #reactjs #refs

#javascript #reactjs #ссылки

Вопрос:

У меня есть сценарий, в котором мне нужно сфокусировать текстовую область, даже если я взаимодействую с другими компонентами, такими как выпадающий список. Я знаю, что мы не можем сфокусировать два элемента одновременно, но мне интересно, можно ли это сделать с помощью ссылок в react.

Я видел такие сайты, как JIRA, которые делают подобные вещи. Например: на изображении ниже ввод даты остается в фокусе, даже если я взаимодействую с приведенным выше календарем.

введите описание изображения здесь

Это мой код. Я хочу, чтобы компонент текстовой области был в фокусе, даже если мы взаимодействуем с раскрывающимся компонентом. Как добиться этого в react?

 import React from "react";
import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <Textarea />
      <br />
      <Dropdown />
    </div>
  );
}

function Textarea() {
  return <textarea rows="10" cols="40"></textarea>;
}

function Dropdown() {
  return (
    <select>
      <option>Pizza</option>
      <option>Pasta</option>
      <option>Burger</option>
    </select>
  );
}

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

1. Вместо того, чтобы использовать собственный <select> элемент, вам нужно будет разработать компонент, который переключает свое состояние между расширенным и свернутым при нажатии, и вашему Textarea компоненту потребуется зарегистрировать глобальный прослушиватель событий, который заставляет фокус возвращаться к textarea элементу после щелчка в любом другом месте. Однако для UX я не рекомендую это делать. Элементы, которые отклоняются от собственного поведения при взаимодействии со страницей, как правило, неинтуитивны и неудобны в использовании.

2. Если вы имеете в виду, что хотите <select> , чтобы и <textarea> были каким-то образом связаны, можете ли вы сделать эту связь более понятной в своем вопросе?

3. @PatrickRoberts Да. Текстовое поле и выбор тесно связаны. В моей реальной проблеме выпадающий список размещается внутри текстового поля в правом верхнем углу. Текстовое поле принимает некоторый ответ, а выпадающий список выбирает язык, с помощью которого ответ автоматически преобразуется на этот язык.