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" });
  }
};

Answer 2

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

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

根据在React中另一个下拉菜单中选择的值在下拉菜单中更改值

2 个答案: