Question

在我的项目中，我正在使用reactjs和react-bootstrap。在我的组件之一内部，有一个带有单选按钮的表单。

我的代码如下：

class OrderForm2 extends Component {
...
handleSubmit = (event) => {
        console.log(this.refs.name.value);
        console.log(this.refs.company.value);
        console.log(this.refs.orderSize.value);
        event.preventDefault();
}

...
return (
<Form className="orderForm2" onSubmit={this.handleSubmit} ref="orderform2">
...
<fieldset>
                        <Form.Group as={Row}>
                            <Form.Label as="legend" column sm={3}>
                                Order Size
                            </Form.Label>
                            <Col sm={9}>
                                <Form.Check 
                                    inline 
                                    name='orderSize'
                                    type='radio'
                                    id='smallOrder'
                                    label='Small Order with Rice'
                                    value='small'
                                    ref='orderSize'
                                />
                                <Form.Check
                                    inline 
                                    name='orderSize'
                                    type='radio'
                                    id='largeOrder'
                                    label='Large Order'
                                    value='large'
                                    ref='orderSize'
                                />
                            </Col>
                        </Form.Group>
                    </fieldset>

...
</Form>

...
}

现在您看到，在handleSubmit（）中，我能够获得文本输入名称和公司的价值，但是使用radioButtons，无论选择哪种，我都只会变大。

我也尝试过：

console.log(ReactDOM.findDOMNode(this).querySelector('input[name="orderSize"').value)

这次奇怪的是，无论我选择什么，我都变得“小”。

我知道我可以通过创建状态并处理该单选按钮的onChange来获取单选按钮的值，但是我想知道是否有更简单的方法。

谢谢

Form.Check单选按钮值

0 个答案: