반응의 심판을 사용하여 ToggleButton (반응 부트 스트랩)의 확인 된 값을 얻습니다.

Question

반응 응용 프로그램에서 반응 부트 스트랩 (https://react-bootstrap.github.io/components.html#btn-groups-checkbox-radio)의 토글 버튼을 사용했습니다. 을 값으로 설정하려고하지만 항상 나를 표시합니다 입니다. 다른 폼 컨트롤도 쉽게 익숙해졌습니다. 도와주세요.

<Row> 
     <Col xs={12} sm={8} md={6}> 
        <FormGroup controlId="journeyType" validationState={ this.props.validation }> 
         <ButtonToolbar> 
         <ToggleButtonGroup type="radio" name="journeyType" defaultValue={"cheapest"} ref="journeyType"> 
          <ToggleButton value={"cheapest"} bsStyle="primary">Cheapest</ToggleButton> 
          <ToggleButton value={"fastest"} bsStyle="primary">Fatest</ToggleButton> 
         </ToggleButtonGroup> 
         </ButtonToolbar> 
         <FormControl.Feedback /> 
        </FormGroup> 
    </Col> 
</Row> 

내 반응 함수

, 나는 아래 사용하고 있습니다 : 아래 코드 위의 코드, 출발 및 도착이 사용자로부터 값을 가질에서

const sortQuery = { 
     departure: findDOMNode(this.refs.departure).value, 
     arrival: findDOMNode(this.refs.arrival).value, 
     journeyType: findDOMNode(this.refs.journeyType).value 
    }; 
    console.log(sortQuery); 
    this.props.handleSort(sortQuery); 

하지만 journeyType이 항상 이 정의되지 않음. 왜냐하면 react-dom은 div 내에서 ToggleButtonGroup을 라디오로 렌더링하기 때문입니다. 심지어 사용하더라도, journeyType: findDOMNode(this.refs.journeyType.checked).value, 또한 작동하지 않습니다.

여러분 모두의 의견을 듣고 싶습니다. 감사합니다

Answer 1

.value 대신 .checked을 사용하는 라디오 버튼이 있다고 생각합니다. 따라서 .value은 필요하지 않습니다.

시도 journeyType: findDOMNode(this.refs.journeyType).checked.