Form.Check значение переключателей - PullRequest
Новая
       8

Form.Check значение переключателей

0 голосов
/ 05 июня 2019

В моем проекте я использую реагирование и загрузку реакции. А внутри одного из моих компонентов есть форма с переключателями.

Мой код выглядит так: 

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 () я могу получить значение ввода текста и названия компании, но с помощью radioButton я получаю только «большие» значения, независимо от того, какой из них я выбираю.

Я тоже пробовал: 

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

На этот раз странно, что я становлюсь «маленьким» независимо от того, что я выберу.

Я знаю, что могу получить значение переключателя, создав состояние и управляя включением этого переключателя, но мне интересно, есть ли более простой способ.

Спасибо

...