React JS Bootstrap Проблема с раскрывающимся списком

Я пытаюсь создать фильтр в своем проекте React.js. Однако у меня возникла проблема, когда список отображается, когда вы нажимаете кнопку, но список не исчезает при втором нажатии или если вы нажмете за пределами списка.

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

import React, { useEffect, useState } from 'react';
// import '../bootstrap/css/bootstrap.css';
import "bootstrap/dist/js/bootstrap.min.js";
import Popper from 'popper.js';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
import './Filterbar.css';

export default function Filterbar() {
    function handlePropertyTypeChange(event){
        console.info(event.target.value);
        event = setPropteryType(event.target.value);
    };
    function handlePriceRangeChange(event){
        console.info(event.target.value);
        event = setPriceRange(event.target.value);
    };
    function handleBedroomChange(event){
        console.info(event.target.value);
        event = setBedroomQTY(event.target.value);
    };
    function handleBathroomChange(event){
        console.info(event.target.value);
        event = setBathroomQTY(event.target.value);
    };
    function handleCityChange(event){
        console.info(event.target.value);
        event = setCityChoice(event.target.value);
    };

    const [propertyType, setPropteryType] = useState('');
    const [priceRange, setPriceRange] = useState('');
    const [BedroomQTY, setBedroomQTY] = useState('');
    const [BathroomQTY, setBathroomQTY] = useState('');
    const [cityChoice, setCityChoice] = useState('');

    return (
        <div className='FilterbarBody'>

            <DropdownButton type = "button" id = "dropdown-basic-button" title = "Property Type &#8964;" data-bs-toggle = "dropdown" aria-expanded = "false">
                <Dropdown.Item value = {0} name = "Property Type" onChange = {handlePropertyTypeChange} aria-labelledby = "dropdown-basic-button">All</Dropdown.Item>
                <Dropdown.Item value = {1} name = "Property Type" onChange = {handlePropertyTypeChange} aria-labelledby = "dropdown-basic-button">Single Family Home</Dropdown.Item>
                <Dropdown.Item value = {2} name = "Property Type" onChange = {handlePropertyTypeChange} aria-labelledby = "dropdown-basic-button">Multi Family Home</Dropdown.Item>
            </DropdownButton>

            <DropdownButton id = "dropdown-basic-button2" title = "Price &#8964;">
                <Dropdown.Item value = {0} name = "Price Range" onChange = {handlePriceRangeChange}>All</Dropdown.Item>
                <Dropdown.Item value = {500} name = "Price Range" onChange = {handlePriceRangeChange}>500+</Dropdown.Item>
                <Dropdown.Item value = {1000} name = "Price Range" onChange = {handlePriceRangeChange}>1,000+</Dropdown.Item>
                <Dropdown.Item value = {1500} name = "Price Range" onChange = {handlePriceRangeChange}>1,500+</Dropdown.Item>
                <Dropdown.Item value = {2000} name = "Price Range" onChange = {handlePriceRangeChange}>2,000+</Dropdown.Item>
                <Dropdown.Item value = {2500} name = "Price Range" onChange = {handlePriceRangeChange}>2,500+</Dropdown.Item>
                <Dropdown.Item value = {3000} name = "Price Range" onChange = {handlePriceRangeChange}>3,000+</Dropdown.Item>
            </DropdownButton>

            <DropdownButton id = "dropdown-basic-button3" title = "Bedroom &#8964;">
                <Dropdown.Item value = {0} name = "Bedroom" onChange = {handleBedroomChange}>All</Dropdown.Item>
                <Dropdown.Item value = {1} name = "Bedroom" onChange = {handleBedroomChange}>1+</Dropdown.Item>
                <Dropdown.Item value = {2} name = "Bedroom" onChange = {handleBedroomChange}>2+</Dropdown.Item>
                <Dropdown.Item value = {3} name = "Bedroom" onChange = {handleBedroomChange}>3+</Dropdown.Item>
                <Dropdown.Item value = {4} name = "Bedroom" onChange = {handleBedroomChange}>4+</Dropdown.Item>
                <Dropdown.Item value = {5} name = "Bedroom" onChange = {handleBedroomChange}>5+</Dropdown.Item>
                <Dropdown.Item value = {6} name = "Bedroom" onChange = {handleBedroomChange}>6+</Dropdown.Item>
            </DropdownButton>

            <DropdownButton id = "dropdown-basic-button4" title = "Bathroom &#8964;">
                <Dropdown.Item value = {0} name = "Bathroom" onChange = {handleBathroomChange}>All</Dropdown.Item>
                <Dropdown.Item value = {1} name = "Bathroom" onChange = {handleBathroomChange}>1+</Dropdown.Item>
                <Dropdown.Item value = {2} name = "Bathroom" onChange = {handleBathroomChange}>2+</Dropdown.Item>
                <Dropdown.Item value = {3} name = "Bathroom" onChange = {handleBathroomChange}>3+</Dropdown.Item>
                <Dropdown.Item value = {4} name = "Bathroom" onChange = {handleBathroomChange}>4+</Dropdown.Item>
                <Dropdown.Item value = {5} name = "Bathroom" onChange = {handleBathroomChange}>5+</Dropdown.Item>
                <Dropdown.Item value = {6} name = "Bathroom" onChange = {handleBathroomChange}>6+</Dropdown.Item>
            </DropdownButton>

            <DropdownButton id = "dropdown-basic-button5" title = "City &#8964;">
                <Dropdown.Item value = {""} name = "City" onChange = {handleCityChange}>All</Dropdown.Item>
                <Dropdown.Item value = {"Cape Coral"} name = "City" onChange = {handleCityChange}>Cape Coral</Dropdown.Item>
                <Dropdown.Item value = {"Fort Myers"} name = "City" onChange = {handleCityChange}>Fort Myers</Dropdown.Item>
                <Dropdown.Item value = {"Lehigh Acres"} name = "City" onChange = {handleCityChange}>Lehigh Acres</Dropdown.Item>
            </DropdownButton>
        </div>
    )
}

.FilterbarBody {
    display: block;
    background-color:gainsboro;
    width: 53em;
    height: 2.50em;
    margin-top: 1em;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1.50em;
    border: .13em solid #808080;
    font-style: 'sans-serif';
    font-size: 1.25em;
}
.FilterbarBody > .dropdown {
    display:inline-block;
    margin-top: auto;
    margin-bottom: auto;
    margin-left: auto;
    margin-right: auto;
    text-decoration: none;
    font-style: 'sans-serif';
}
.FilterbarBody > .dropdown > button {
    display: block;
    margin-left: 1.23em;
    margin-right: 1.23em;
    text-decoration: none;
    background-color: rgba(250, 235, 215, 0);
    padding: .75em 1.75em;
    font-size: 1em;
    list-style: none;
    border: none;
    border-radius: .50em;
}
.FilterbarBody > .dropdown > button:hover {
    background-color:rgba(250, 240, 230, 0);
    color: red;
}
.dropdown-item {
    display:block;
    text-decoration: none;
    color: white;
    background-color: black;
    border-bottom: 0.010em solid linen;
    font-style: 'sans-serif';
    font-weight: .25em;
    padding: 1em 1.75em;
}
.dropdown-item:hover {
    background-color: linen;
    color: red;
}

Что ж, файл CSS из Bootstrap — это тот, который помогает переключать компоненты, поэтому вам нужен этот файл. Кроме того, нет смысла использовать Bootstrap, если вы собираетесь настраивать стили вручную, но если вы все же хотите пойти по этому пути, проверьте, как вы должны это делать здесь

— 28.11.2022 22:08

Кроме того, вы не используете входные данные, поэтому вам следует использовать onClick вместо onChange. И строка event = setPriceRange(event.target.value); неправильная, вы перезаписываете событие с изменением состояния; это не имеет никакого смысла. Просто сохраните его как setPriceRange(event.target.value);, чтобы вы запускали рендеринг и обновляли значение.

— 28.11.2022 22:13

@Thremulant Но почему загрузочный CSS перезаписывает все мои файлы CSS?

— 29.11.2022 03:22

Bootstrap не перезаписывает файлы. Он может переопределять правила стилей CSS, но с этим приходится иметь дело при использовании любой библиотеки стилей. Лучший подход — сначала загрузить CSS Bootstrap, а затем создать свои настройки. Делать наоборот — это рецепт разочарования.

— 30.11.2022 16:17

Пожалуйста, отметьте React и вашу версию Bootstrap.

— 30.11.2022 16:19

@Thremulant, ведущий разработчик внешнего интерфейса должен знать никогда не ссылаться «здесь». Доступность имеет решающее значение в вашей сфере деятельности. :)

— 30.11.2022 16:19

javascript css reactjs twitter-bootstrap

28.11.2022 21:29

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

В итоге я использовал React Select, который, похоже, теперь работает гораздо больше в мою пользу. У меня есть демо ниже, и Я предоставлю больше обновлений здесь, если у меня возникнут какие-либо проблемы.

import React from 'react';
import ReactDOM from 'react-dom';
import Select from 'react-select';
import './Filterbar.css'

const propertyTypeOptions = [
  { value: 'All', label: 'All' },
  { value: 'Single Family Home', label: 'Single Family Home' },
  { value: 'Multi Family Home', label: 'Multi Family Home' },
];
const propertyPriceOptions = [
  { value: 0, label: 'All' },
  { value: 500, label: '500' },
  { value: 1000, label: '1,000' },
  { value: 1500, label: '1,500' },
  { value: 2000, label: '2,000' },
  { value: 2500, label: '2,500' },
  { value: 3000, label: '3,000' },
  { value: 3500, label: '3,500' },
];
const propertyBedroomOptions = [
  { value: 0, label: 'All' },
  { value: 1, label: '1' },
  { value: 2, label: '2' },
  { value: 3, label: '3' },
  { value: 4, label: '4' },
  { value: 5, label: '5' },
  { value: 6, label: '6' },
  { value: 7, label: '7' },
  { value: 8, label: '8' },
  { value: 9, label: '9' },
];
const propertyBathroomOptions = [
  { value: 0, label: 'All' },
  { value: 1, label: '1' },
  { value: 2, label: '2' },
  { value: 3, label: '3' },
  { value: 4, label: '4' },
  { value: 5, label: '5' },
  { value: 6, label: '6' },
  { value: 7, label: '7' },
  { value: 8, label: '8' },
  { value: 9, label: '9' },
];
const propertyCityOptions = [
  { value: 'All', label: 'All' },
  { value: 'Cape Coral', label: 'Cape Coral' },
  { value: 'Fort Myers', label: 'Fort Myers' },
  { value: 'Lehigh Acres', label: 'Lehigh Acres' },
];
class RentalFilterbar extends React.Component {
  state = {
    selectedPropertyTypeOptions: null,
    selectedPriceOptions: null,
  };
  handleChangeEventPropertyTypeOptions = (selectedPropertyTypeOptions) => {
    this.setState({ selectedPropertyTypeOptions }, () =>
      console.info(`propertyTypeOptions selected:`, this.state.selectedPropertyTypeOptions)
      );
  };
  handleChangeEventPropertyPriceOptions = (selectedPropertyPriceOptions) => {
    this.setState({ selectedPropertyPriceOptions }, () =>
      console.info(`selectedPropertyPriceOptions selected:`, this.state.selectedPropertyPriceOptions)
      );
  };
  handleChangeEventPropertyBedroomOptions = (selectedPropertyBedroomOptions) => {
    this.setState({ selectedPropertyBedroomOptions }, () =>
      console.info(`selectedPropertyBedroomOptions selected:`, this.state.selectedPropertyBedroomOptions)
      );
  };
  handleChangeEventPropertyBathroomOptions = (selectedPropertyBathroomOptions) => {
    this.setState({ selectedPropertyBathroomOptions }, () =>
      console.info(`selectedPropertyBathroomOptions selected:`, this.state.selectedPropertyBathroomOptions)
      );
  };
  handleChangeEventPropertyCityOptions = (selectedPropertyCityOptions) => {
    this.setState({ selectedPropertyCityOptions }, () =>
      console.info(`selectedPropertyCityOptions selected:`, this.state.selectedPropertyCityOptions)
      );
  };
  render() {
    const { selectedPropertyTypeOptions, selectedPropertyPriceOptions, selectedPropertyBedroomOptions, selectedPropertyBathroomOptions, selectedPropertyCityOptions } = this.state;
    return (
        <>
        <form onChange = {this.handleSubmit}>
            <label>Property Type:
                <Select
                    value = {selectedPropertyTypeOptions}
                    onChange = {this.handleChangeEventPropertyTypeOptions}
                    options = {propertyTypeOptions}
                />
            </label>
            <label>Max Price:
                <Select
                    value = {selectedPropertyPriceOptions}
                    onChange = {this.handleChangeEventPropertyPriceOptions}
                    options = {propertyPriceOptions}
                />
            </label>
            <label>Min Bed:
                <Select
                    value = {selectedPropertyBedroomOptions}
                    onChange = {this.handleChangeEventPropertyBedroomOptions}
                    options = {propertyBedroomOptions}
                />
            </label>
            <label>Min Bath:
                <Select
                    value = {selectedPropertyBathroomOptions}
                    onChange = {this.handleChangeEventPropertyBathroomOptions}
                    options = {propertyBathroomOptions}
                />
            </label>
            <label>City:
                <Select
                    value = {selectedPropertyCityOptions}
                    onChange = {this.handleChangeEventPropertyCityOptions}
                    options = {propertyCityOptions}
                />
            </label>
        </form>
        </>
    );
  }
}
ReactDOM.render(
  <RentalFilterbar />,
  document.getElementById('root')
);

form {
    margin-left: auto;
    margin-right: auto;
    width: 70em;
}
form > label {
    display: inline-block;
    font-family: 'sans-serif';
    font-size: 1.15em;
}
form > label > .css-b62m3t-container {
    display: inline-block;
    margin-left: 0.25em;
    margin-right: 0.75em;
    width: 7.1255em;
    font-family: 'sans-serif';
    size: 2em;
}

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

Если ваш ответ не касается фактического вопроса, пожалуйста, либо измените вопрос соответствующим образом, либо удалите его. Заброшенный вопрос не приносит пользы сообществу.

— 30.11.2022 16:18

29.11.2022 09:05