Параметр HTML Select предоставляет вам меню, подобное параметру списка, для выбора значения. В качестве реакции вы можете просто использовать select в своих формах для большей части своей работы, как вы это делаете в своем собственном HTML-коде, и он будет работать нормально, но иногда вам может понадобиться пользовательский select на основе требований пользовательского интерфейса для вашего веб-сайта.

Здесь мы собираемся создать собственный выбор, который будет выглядеть так -

Я создал эту демонстрацию без использования React Hooks (я обязательно клонирую этот пример с помощью React Hooks в будущем), чтобы она была нацелена на большую часть аудитории, которая, возможно, не использует React ›16.8. *.

CustomSelect компонент будет иметь два атрибута -

  1. defaultText - для отображения текста по умолчанию в контейнере окна выбора
  2. optionsList - массив объекта, содержащий идентификатор и имя

Мой index JS файл, содержащий компонент CustomSelect, например -

Мой CustomSelect Компонент будет выглядеть так -

Давайте шаг за шагом рассмотрим, что происходит внутри CustomSelect Компонента -

В методе componentDidMount мы добавляем прослушиватель событий для отслеживания щелчка мыши, чтобы, если пользователь щелкнет за пределами области контейнера выбора, он закроет элементы списка.

handleClickOutside проверяет, находится ли щелчок не внутри selected-text и не на li параметрах с классом custom-select-option, затем скрывает список -

// This method handles the click that happens outside the
// select text and list area
handleClickOutside = e => {
  if (
    !e.target.classList.contains("custom-select-option") &&
    !e.target.classList.contains("selected-text")
  ) {
    this.setState({
      showOptionList: false
    });
  }
};

Для двух других методов, то есть handleListDisplay() и handleOptionClick(), давайте сначала рассмотрим render() -

Для простоты я разделю его на две части:

Раздел 1 - имеет дело с отображением defaultDisplayText, который является текстом, отображаемым для выбранного по умолчанию и выбранного текста. К этому div мы прикрепляем handleListDisplay метод, который переключает отображение списка.

// This method handles the display of option list
handleListDisplay = () => {
  this.setState(prevState => {
    return {
      showOptionList: !prevState.showOptionList
    };
  });
};

Раздел 2 - относится к части списка select, в которой мы повторяем optionsList, переданный как опора. В тег li мы добавляем - className, data-name, key и onClick обработчик событий. Атрибут data-name, который мы добавляем, чтобы передать имя (вы можете добавить другие атрибуты данных в зависимости от ваших требований) для отображения в выбранном текстовом контейнере. handleOptionClick() метод извлекает данные из атрибута data-name и скрывает список после щелчка.

// This method handles the setting of name in select text area
// and list display on selection
handleOptionClick = e => {
  this.setState({
    defaultSelectText: e.target.getAttribute("data-name"),
    showOptionList: false
  });
};

И это весь JS, который вам нужно написать для создания настраиваемого выбора, подобного упомянутому выше.

Стиль, используемый в приложении, следующий:

Вы можете найти работающий пример на codeandbox.io - https://codesandbox.io/s/react-custom-select-bpsi7