Question

我在反应应用程序中的一个表单中使用了react- bootstrap（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 始终具有 undefined 。这是因为，react-dom将 ToggleButtonGroup 渲染为div中的无线电。即使使用journeyType: findDOMNode(this.refs.journeyType.checked).value，也无效。

希望听到你们的意见。感谢

Answer 1

您可以在 onChange 的 ToggleButtonGroup 函数中调用您的函数。如果您的 onChange={handleChange}，那么，

handleChange = (slectedButtonNumber) =>{
  //slectedButtonNumber= the 'value' of the selected radio button
}

Answer 2

我认为使用单选按钮我们使用.checked代替.value。因此不需要.value。

尝试journeyType: findDOMNode(this.refs.journeyType).checked。

在反应中使用refs获取ToggleButton（react-bootstrap）的检查值

2 个答案: