Javascript 根据React中另一个下拉列表中选择的值更改下拉列表中的值

我正在学习React并创建一个有两个下拉列表的表单。我想要的是，在第一个下拉列表中选择特定值时，第二个下拉列表应该自动选择特定值

例如，如果我在下拉列表1中选择A，那么下拉列表2默认情况下应该选择B。 我见过其他的例子，但是这些改变了第二个下拉列表的所有值，我不希望这样。我只想选择一个默认值

这是我的下拉列表代码-

   <select
      name="First"
      className="inputField dropdownForm "
      value={this.state.First}
      onChange={this.handleChange}
    >
      <option value="">Choose first alphabet</option>
      <option value="A">A</option>
      <option value="C">C</option>
    </select>


    <select
      name="SecondAlpha"
      className="inputField dropdownForm"
      value={this.state.secondAlpha}
      onChange={this.handleChange}
    >
      <option value="">Choose second alphabet</option>
      <option value="B">B</option>
      <option value="D">D</option>
    </select>

选择第一个字母表
A.
C
选择第二个字母表
B
D

---

我应该做哪些更改和添加？

听起来您想在“第一个”下拉列表的

handleChange

中添加一个条件：

handleChangeOfFirst = (e) => {
  if (e.target.value === "A") {
    this.setState({ secondAlpha: "B" });
  }
};

---

如果你想避免任何情况，这可能会有所帮助

const obj = {A: 'B', C: 'D'};
handleChangeOfFirst = (e) => {
  this.setState({ secondAlpha: obj[e.target.value] });
};

---

这很简单，您可以根据第一次选择的更改设置第二个Alpha状态，即在handleChange中检查值并根据设置的值设置第二个Alpha状态。您可以尝试更新您的问题吗？谢谢您的回复和帮助！我不敢相信我之前没有想到这一点，而是直接跳到了复杂的事情上！