Два элемента Select (выпадающие) с одной условной опцией - PullRequest
Новая
       31

Два элемента Select (выпадающие) с одной условной опцией

0 голосов
/ 27 апреля 2020

Я использовал два элемента выбора (выпадающий). Первый предназначен для item , а второй - для color . Цвет зависит от значения элемент .

Если значение элемент равно ITEM1 , то color может иметь color1, color2, color3 , и если значение item равно ITEM2 , тогда color может иметь color4, color5, color6 . Код ниже 

 <select name="item" onChange={changeItem}>
    <option value="ITEM1"> Item1 </option>
    <option value="ITEM2"> Item2 </option>
  </select>
  <select name="color" onChange={changeInputs}>
    {inputs.item === "ITEM1" ? (
      <Fragment>
        <option selected value="color1">Color 1</option>
        <option value="Color2"> Color 2 </option>
        <option value="Color3"> Color 3 </option>
      </Fragment>
    ) : (
      <Fragment>
        <option selected value="color4">Color 4 </option>
        <option value="Color5"> Color 5 </option>
        <option value="Color6"> Color 6 </option>
      </Fragment>
    )}
  </select>

Когда я изменяю значение item , я вручную обновляю значение color до первой опции соответствующего цвет .

Но тут возникает проблема. Когда я изменяю color на color 2 (без изменения item т.е. item все еще ITEM1 ) а затем изменяет значение item на ITEM2 , начальное значение отображается в color , опция color 5 (не color4 , как я и ожидал, должно быть указано значение параметра по умолчанию), что создает ошибку в моем веб-приложении. Как это решить? Или есть другой способ сделать то же самое. СПАСИБО заранее.

Вы можете смоделировать выше здесь

1 Ответ

2 голосов
/ 27 апреля 2020

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

          <Fragment>
            <option selected key="color1" value="color1">
              Color 1
            </option>
            <option key="Color2" value="Color2">
              Color 2
            </option>
            <option key="Color3" value="Color3">
            </option>
          </Fragment>
        ) : (
          <Fragment>
            <option selected key="color4" value="color4">
              Color 4
            </option>
            <option key="Color5" value="Color5">
              Color 5
            </option>
            <option key="Color6" value="Color6">
              Color 6
            </option>
          </Fragment>
...