更改选择（下拉）选择反应组件内的状态更改答案

【问题标题】：Change Select (drop down) selection on state change within react component更改选择（下拉）选择反应组件内的状态更改
【发布时间】：2016-03-08 18:13:36
【问题描述】：

我有一个下拉列表，我希望在数据可用时预先选择。然而，似乎没有真正的机会？

由于我正在等待特定值的状态更改，使用该值作为 value= 会导致选择不可选择，而将其用作 defaultValue= 会导致 UI 无法识别该值，除非发生更改如果用户决定使用默认选择，则该元素的含义将不会被传递给我试图将其传递给的 API。

有没有办法在组件安装后 dom 准备好后以及状态更改时动态更改选择框？

【问题讨论】：

你还在等什么？你能用promise吗？
您是否尝试过在 value 中使用默认值并添加一个 onChange 处理程序以允许它被选中？
我尝试了多种管理方法，每种方法似乎都有其不良影响。我已经尝试了 defaultVaule 和 value onChange 的组合，最多并包括一次尝试所有三个并进行变体更改，以查看是否可行。至于我正在等待的是元素存在于 DOM 上并基于交互，或者到那时为止生成的数据，我可能正在等待 API 响应来填充该字段以用于手头的其他选择。到那时我才知道我想要什么作为默认值

标签： javascript html dom reactjs

【解决方案1】：

没有看到代码有点困难，但是你有没有尝试将值设置为 React 组件的状态并渲染它呢？您还可以读取状态的值而不是 DropDown 的值。

getInitialState: function () {
        return {
          dropDownSelection: "some default value"
        };
      },

handleSelectionChanged: function (e) {
    this.setState({
      dropDownSelection: e.target.value
    });
  },

render: function () {
    return (
    //...
    <select className="form-control" value={this.state.dropDownSelection} onChange={this.handleSelectionChanged}>
    //...
    </select>
    );
}

【讨论】：

任何反馈@chris？