javascript - 更改选择(下拉)选择 react 组件内的状态变化

Question

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

由于我正在等待特定值的状态更改，使用该值作为 value= 导致选择无法选择，而将其用作 defaultValue= 导致 UI 无法识别该值，除非对元素进行了更改意味着如果用户决定使用默认选择，它不会被传递到我试图传递给的 API。

有没有一种方法可以在组件安装后 dom 准备就绪后和状态更改时动态更改选择框？

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