FormControl Select 的 React-Bootstrap 设置值

Question

I have a FormControl which is a Select that I am using in a form. It works fine when adding a new resource, but when I want to edit an existing record I need to set the value of the control. I'm not seeing a good way to set the value of the select / combobox. This is what my JSX looks like.

<FormGroup controlId="group">
    <ControlLabel>Group</ControlLabel>
    <FormControl componentClass="select" placeholder="Group"
                 inputRef={ref => { this.groupSelect = ref; }}
                 onChange={this.groupSelect}>
        <option></option>
        {
            this.state.groups.map(function (group) {
              return <option key={group.id} value={group.id}>{group.name}</option>
            })
        }
    </FormControl>
</FormGroup>

I've tried to access the component this way but it comes up undefined.

console.debug(this.groupSelect);
this.groupSelect.value(1);

UPDATE:

I'm trying the following, but this doesn't appear to be working either because I don't have access in the state, calling bind causes an error.

<FormGroup controlId="group">
    <ControlLabel>Group</ControlLabel>
    <FormControl componentClass="select" placeholder="Group"
                 inputRef={(ref) => { this.state.groupSelect = ref }}
                 onChange={this.groupSelect}>
        <option></option>
        {
            this.state.groups.map(function (group) {
                return <option key={group.id} value={group.id} selected={this.state.selectedGroupId == group.id}>{group.name}</option>
            }).bind(this)
        }
    </FormControl>
</FormGroup>

Answer 1

You are missing a crucial piece here, which is you need to set the value of the component. Add:

value={this.state.groupSelectValue || defaultValue}

Where groupSelectValue is the value from the record you're editing, and the defaultValue is what you want to default to if there is no record or no value in the record.

Then, in the onChange event function ( groupSelect(e) ), you will do:

this.setState({
 groupSelectValue: e.target.value
});

So that the state is updated with the selection.

Answer 2

所选值应来自模型（状态或属性），您正在尝试使用 'jquery 方式' 实现所需的内容 - 这是错误的。

Answer 3

我可能知道如何获取在状态变量选项中选择的键值吗？