[英]How to add antd radio button for react?
我要在項目中從antd導入Radio 。
我需要兩個名為“應納稅”和“無需納稅”的單選按鈕。
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>
如何包含第二個單選按鈕,以便可以在兩列(兩行)中查看這些單選按鈕?
您需要自定義樣式的radio buttons
類似於此處的垂直單選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>
您可以使用Vertical RadioGroup ,也可以使用<br/>
標簽。
您可以在這里查看可用的stackblitz演示。
具有風格的代碼片段
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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.