有没有办法借助 React 中的功能更改选定的选项？

Question

我有自定义的 radio 按钮和 select，只有少数 options。默认情况下，只有部分选项显示在 select 框中。当我选中任何 radio 按钮时，select 选项将更改为其他一些选项。当我取消选中 radio 按钮时，它们将变回默认的 select 选项。到目前为止一切都很好。但是，如果选项是 selected，然后 radio 按钮再次被选中或取消选中，它将像通常那样更改 select 选项，但它不会显示第一个选项或默认值（第一个选项）。它将显示第二个或第三个取决于之前选择的是哪个。它不会跳回到 "Actions"

{!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

是的，您可以在 React 中使用受控表单元素。你需要跟踪 value 道具，传递它而不是 defaultValue 以使其工作。

解决方法在这里

Answer 2

处理此问题的一种方法是向两个 select 元素添加一个 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>
  </>
}

这样做的效果是在 this.state.isAnySelected 发生变化时重新挂载 select。

当前 this.state.isAnySelected 更改时，React 只会更新现有选项的选项文本，因此当前 selected 索引不受影响。 "defaultValue" 只会影响首次安装元素时 selected 的内容。这两个不同的键导致 React 将它们视为单独的 DOM 元素而不是对现有 DOM 元素的更改，因此每当 this.state.isAnySelected 更改时，先前的 select 将被卸载并另一个安装了正确的默认值。

有没有办法借助 React 中的功能更改选定的选项？

Is there a way to change selected option with help of function in React?

html-select

reactjs