Параметр HTML Select предоставляет вам меню, подобное параметру списка, для выбора значения. В качестве реакции вы можете просто использовать select
в своих формах для большей части своей работы, как вы это делаете в своем собственном HTML-коде, и он будет работать нормально, но иногда вам может понадобиться пользовательский select
на основе требований пользовательского интерфейса для вашего веб-сайта.
Здесь мы собираемся создать собственный выбор, который будет выглядеть так -
Я создал эту демонстрацию без использования React Hooks (я обязательно клонирую этот пример с помощью React Hooks в будущем), чтобы она была нацелена на большую часть аудитории, которая, возможно, не использует React ›16.8. *.
CustomSelect
компонент будет иметь два атрибута -
- defaultText - для отображения текста по умолчанию в контейнере окна выбора
- 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