Есть ли способ изменить выбранную опцию с помощью функции в React?

Question

У меня есть пользовательские кнопки radio и select с несколькими options. По умолчанию в окне выбора отображаются только некоторые параметры. Когда я проверяю любую кнопку radio, параметры select меняются на другие. Когда я снимаю отметку с кнопки radio, они возвращаются к настройкам по умолчанию select. Пока все хорошо. Но если опция выбрана, а затем кнопка radio снова отмечена или снята, она изменит опции select, как обычно, но не будет отображать первую опцию или значение по умолчанию (которое является первой опцией). Он будет отображать второе или третье в зависимости от того, какой из них был выбран ранее. Его нельзя возвращаться к «Действиям»

{!this.state.isAnySelected ?
  <>
    <select defaultValue="Actions">
      <option>Actions</option>
      <option>Category request</option>
      <option>Add new review</option>
    </select>
  </>
  :
  <>
    <select defaultValue="Actions">
      <option>Actions</option>
      <option>Add new product</option>
      <option>View product</option>
    </select>
  </>
}

Я пытался изменить defaultValue каждый раз, когда нажимается переключатель, но ничего не происходит.

Answer 1

Один из способов справиться с этим - добавить key к двум выбранным элементам:

{!this.state.isAnySelected ?
  <>
    <select key="categorySelect" defaultValue="Actions">
      <option>Actions</option>
      <option>Category request</option>
      <option>Add new review</option>
    </select>
  </>
  :
  <>
    <select key="productSelect" defaultValue="Actions">
      <option>Actions</option>
      <option>Add new product</option>
      <option>View product</option>
    </select>
  </>
}

Эффектом этого будет повторное монтирование select при каждом изменении this.state.isAnySelected.

В настоящее время, когда изменяется this.state.isAnySelected, React просто обновляет текст параметров существующих параметров, поэтому текущий выбранный индекс не изменяется.«DefaultValue» будет влиять только на то, что выбрано при первом монтировании элемента.Два разных ключа заставляют React рассматривать их как отдельные элементы DOM, а не как изменения существующих элементов DOM, поэтому при изменении this.state.isAnySelected предыдущий select будет отключен, а другой смонтирован с правильным значением по умолчанию.

Answer 2

Да, вы можете использовать контролируемые элементы формы в реакции. вам нужно отследить value проп, пропустите его вместо defaultValue, чтобы он заработал.

Решение здесь ?