React双下拉框值传递实现：首框值同步次框且次框可独立修改

你现有代码存在两处核心问题：

• 第一个下拉的value错误绑定了props中的dropSelected，实际你把值存在了组件state里，导致第一个下拉选择后视图不会同步更新
• 两个下拉绑定了同一个值，导致第二个下拉修改后没有独立的状态存储，第一个下拉变动时会直接覆盖第二个的取值

具体修改步骤如下：

1. 给state新增第二个下拉的独立状态

constructor(props) {
  super(props);
  this.state = {
    dropSelected: "",
    secondDropSelected: "" // 新增第二个下拉的独立状态
  }
}

2. 修改第一个下拉的onChange事件，同步更新两个状态

handleSelected = dropSelected => {
  this.setState({
    dropSelected,
    secondDropSelected: dropSelected // 第一个下拉变动时同步更新第二个的状态
  })
}

3. 修正render里的状态取值，修改第二个下拉的绑定值和onChange逻辑

render(){
  // 修正：原来错误解构了props的dropSelected，改成从state取值
  const { dropSelected, secondDropSelected } = this.state

  return(
    {/* 第一个下拉，其余逻辑保持不变 */}
    <Select
      disabled={false}
      onChange={this.handleSelected}
      value={dropSelected}
    >
      {dropdownDenied.map((item, index) => (
        <option value={item.value || ""} key={index}>
          {item.label}  
        </option>
      ))}
    </Select>

    {/* 第二个下拉：value绑定独立状态，onChange新增状态更新逻辑 */}
    <Select
      value={secondDropSelected}
      onChange={e => {
        const val = e.target.value
        // 先更新第二个下拉的独立状态，保证用户修改能正常展示
        this.setState({ secondDropSelected: val })
        // 保留原有业务逻辑
        this.actionRow(
          i,
          {
            key: "reject_from",
            value: val
          },
          idx
        );
      }}
    >
      {dropdownDenied.map((item, index) => (
        <option value={item.value || ""} key={index}>
          {item.label}
        </option>
      ))}
    </Select>
  );
}

该方案的逻辑为：第一个下拉变动时会强制同步第二个的状态，实现自动更新需求；第二个下拉修改时只会更新自己的独立状态，不会影响第一个的取值，满足自主修改的需求。

内容的提问来源于stack exchange，提问作者htpea