React-Bootstrap의 FormControl 설정 값 선택

Question

폼에 사용중인 선택 인 FormControl이 있습니다. 새 리소스를 추가 할 때 제대로 작동하지만 기존 레코드를 편집하려면 컨트롤의 값을 설정해야합니다. 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); 

업데이트 : 나는 다음을 시도하고 있지만,이 동작하지 않는

나는 상태에서 액세스 할 수 없기 때문에 중, 바인드를 호출하면 오류가 발생합니다. 잘못된 -

<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

선택한 값은 모델 (주 또는 속성)에서 와야한다, 당신은 'JQuery와 방법'에 필요한 달성하기 위해 노력하고 있습니다.

Answer 2

여기에 중요한 부분이 누락되었습니다. 구성 요소의 값을 설정해야합니다. 추가 :

groupSelectValue가 편집중인 레코드의 값을, 그리고 defaultValue가 더 레코드 또는 레코드의 가치가없는 존재하지 않는 경우에 기본값으로 원하는 것입니다

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

.

그런 다음 onChange 이벤트 기능 (groupSelect(e)), 당신은 할 것 :

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

을 따라서 상태가 선택과 업데이트됩니다.