有没有办法借助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

是的，您可以在react中使用受控表单元素。您需要跟踪value道具，然后通过它而不是defaultValue来使它起作用。

解决方案

Answer 2

一种解决方法是在两个选择元素中添加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都会被卸载，而另一个this.state.questionTags.map((tag) => { return ( <div> {tag} </div> ) }) 则具有正确的默认值。