Как добавить радио кнопку и реагировать?

Question

Я импортирую Radio из antd в моем проекте.

Мне нужны две радиокнопки с названиями «Налогооблагаемый» и «Не облагаемый налогом».

import {Button, Radio, Form, Icon, Input, message,Modal,createFormField,Row,Col} from "antd";

<Row gutter={24}>
    <Col span={24}>
    <FormItem>
        {getFieldDecorator('IsTaxable', {
        initialValue: "",
        rules: [{
        required: true, message: 'Please Choose your option!',
        }],
        })(
        <Radio value='true'>Taxable</Radio>


        )}

    </FormItem>

    </Col>
</Row>

Как включить вторую радиокнопку, чтобы я мог просматривать эти радиокнопки в двух столбцах (двух строках)?

Answer 1

Вы можете использовать Вертикальная радиогруппа или вы также можете использовать тег <br/>.

Вы можете проверить здесь с рабочей stackblitz demo.

Фрагмент кода со стилем

const radioStyle = {
    display: 'block',
    height: '30px',
    lineHeight: '30px',
};

<FormItem>
    {getFieldDecorator('IsTaxable', {
    initialValue: "",
    rules: [{
    required: true,
    message: 'Please Choose your option!',
    }],
    })(<RadioGroup onChange={this.onChange}>
        <Radio style={radioStyle} value={true}>Taxable</Radio>
        <Radio style={radioStyle} value={false}>Non Taxable</Radio>
    </RadioGroup>
    )}

</FormItem>

Фрагмент кода с тегом <br>

<FormItem>
    {getFieldDecorator('IsTaxable', {
    initialValue: "",
    rules: [{
    required: true,
    message: 'Please Choose your option!',
    }],
    })(<RadioGroup onChange={this.onChange}>
        <Radio value={true}>Taxable</Radio> <br />
        <Radio value={false}>Non Taxable</Radio>
    </RadioGroup>
    )}

</FormItem>

Answer 2

Вам нужно настроить стиль radio buttons, как здесь показано в демонстрации вертикальной группы радиостанций - https://ant.design/components/radio/

https://codesandbox.io/s/rj2692803o

 const radioStyle = {
   display: "block",
   "margin-bottom": "5px",
   "border-radius": "3px"
 };

<Radio.Group defaultValue="taxable" buttonStyle="solid">
   <Radio.Button value="taxable" style={radioStyle}>
     Taxable
   </Radio.Button>
   <Radio.Button value="non-taxable" style={radioStyle}>
      Non-Taxable
   </Radio.Button>
</Radio.Group>