2017-10-12 7 views
0

react-bootstrap(https://react-bootstrap.github.io/components.html#btn-groups-checkbox-radio)のトグルボタンを反応アプリケーションで使用しました。私はの値にチェックしたいと思っていますが、常に私にが表示されています。です。他のフォームコントロールも容易になっています。助けてください。以下のコードされています反応のrefsを使用してToggleButton(react-bootstrap)のチェック値を取得します

<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も機能しません。

皆様からのご連絡をお待ちしております。ありがとう

答えて

0

.valueの代わりに.checkedを使用しています。したがって、.valueの必要はありません。

お試しjourneyType: findDOMNode(this.refs.journeyType).checked

+0

実際には機能しません。 – Owais

関連する問題