mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-13 07:39:10 +08:00
60771a0f61
* feat: support requreidMarkType * docs: Update doc desc * fix lint * use requiredMark instead * not change className * fix ts * update test case * rtl style * fix rtl Co-authored-by: xrkffgg <xrkffgg@vip.qq.com>
1.4 KiB
1.4 KiB
order | title | ||||
---|---|---|---|---|---|
3.1 |
|
zh-CN
通过 requiredMark
切换必选与可选样式。
en-US
Switch required or optional style with requiredMark
.
import React, { useState } from 'react';
import { Form, Input, Button, Radio } from 'antd';
const FormLayoutDemo = () => {
const [form] = Form.useForm();
const [requiredMark, setRequiredMarkType] = useState<boolean | 'optional'>('optional');
const onRequiredTypeChange = ({ requiredMark }) => {
setRequiredMarkType(requiredMark);
};
return (
<Form
form={form}
layout="vertical"
initialValues={{ requiredMark }}
onValuesChange={onRequiredTypeChange}
requiredMark={requiredMark}
>
<Form.Item label="Required Mark" name="requiredMark">
<Radio.Group>
<Radio.Button value="optional">Optional</Radio.Button>
<Radio.Button value={true}>Required</Radio.Button>
<Radio.Button value={false}>Hidden</Radio.Button>
</Radio.Group>
</Form.Item>
<Form.Item label="Field A" required>
<Input placeholder="input placeholder" />
</Form.Item>
<Form.Item label="Field B">
<Input placeholder="input placeholder" />
</Form.Item>
<Form.Item>
<Button type="primary">Submit</Button>
</Form.Item>
</Form>
);
};
ReactDOM.render(<FormLayoutDemo />, mountNode);