Блог

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

как сделать выбор раскрывающегося списка по умолчанию с помощью реактивных крючков

#javascript #reactjs #forms #react-hooks

#javascript #reactjs #формы #react-hooks

Вопрос:

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

Проблема в том

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

Я не знаю, почему появляется эта проблема

Что я сделал

   const [selected_country, setselected_country] = useState("England");
  const [selected_state, setselected_state] = useState("London");

Создание состояний для выбранных по умолчанию, как указано выше, после этого

  <select
    name="Country"
    value={selected_country}
    onChange={(e) => onchange_device(e.target.value)}
  >
    {data.map((li, index) => (
      <option key={index} value={li.country}>
        {li.country}
      </option>
    ))}
  </select>

вот как я перебираю страны своих данных

 <select name="city" value={selected_state}>
    {cityOptions.map((city, index) => (
      <option key={index} value={city.city_name}>
        {city.city_name}
      </option>
    ))}
  </select>

вышеупомянутый вариант предназначен для установки городов по умолчанию.

Я не знаю, где я ошибаюсь.

Моя песочница кода для лучшего понимания

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

1. Вы контролировали выбор, но вы никогда не меняете их value на вновь выбранный. Вот почему в вашем codesandbox set* функции имеют красные волнистые линии под ними: вы никогда их не используете. Вам нужно вставить setselected_country(country); в свой обработчик onchange.

2. @ChrisG Ya Я изменил это, но города по-прежнему ведут себя так же, не могли бы вы, пожалуйста, помочь мне с каким-нибудь примером

3. У вашего выбора города нет onChange слушателя.

Ответ №1:

Я внес два изменения,

  1. Изменены данные [1] в строке 40. Потому что при загрузке страницы была выбрана Англия, но штаты были из Индии.
 const [cityOptions, setCityOptions] = useState(data[1].cities);
  1. Добавлен onChange обработчик в раскрывающийся список выбора в строке 61.
 <select name="city" value={selected_state} onChange={e => setselected_state(e.target.value)}>