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

Question

我正在学习 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>

我应该进行哪些更改和添加？

Answer 1

听起来您想在“第一个”下拉列表的 handleChange 中添加一个条件:

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