Question

我有一个FormControl，它是我在表单中使用的Select。它在添加新资源时工作正常，但是当我想编辑现有记录时，我需要设置控件的值。我没有看到设置select / combobox值的好方法。这就是我的JSX的样子。

<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>

我试图以这种方式访问组件，但它未定义。

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

更新：

我正在尝试以下操作，但这似乎不起作用，因为我在该状态下没有访问权限，调用bind会导致错误。

<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

您在这里缺少一个关键部分，您需要设置组件的值。添加：

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

其中groupSelectValue是您正在编辑的记录中的值，如果记录中没有记录或没有值，则defaultValue是您要默认的值。

然后，在onChange事件函数（groupSelect(e)）中，您将执行以下操作：

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

使用选择更新状态。

Answer 2

所选的值应该来自模型（状态或属性），你试图用'jquery方式'来实现你所需要的 - 这是错误的。

FormControl Select的React-Bootstrap设置值

2 个答案: