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 / bobox. This is what my JSX looks like.

<FormGroup controlId="group">
    <ControlLabel>Group</ControlLabel>
    <FormControl ponentClass="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 ponent this way but it es 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 ponentClass="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>

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 / bobox. This is what my JSX looks like.

<FormGroup controlId="group">
    <ControlLabel>Group</ControlLabel>
    <FormControl ponentClass="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 ponent this way but it es 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 ponentClass="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>

• javascript
• reactjs
• react-bootstrap

2 Answers 2

You are missing a crucial piece here, which is you need to set the value of the ponent. 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.

The selected value should e from model (state or property), you are trying to achieve what you need with 'jquery way '- which is wrong.