mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-23 23:18:36 +08:00
b9a6b7b578
* demo: update demo * add form * clear * add Select * add * fix style * fix style * fix * revert
68 lines
1.7 KiB
TypeScript
68 lines
1.7 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
|
import { Button, Checkbox, Form, Input } from 'antd';
|
|
|
|
const formItemLayout = {
|
|
labelCol: { span: 4 },
|
|
wrapperCol: { span: 8 },
|
|
};
|
|
|
|
const formTailLayout = {
|
|
labelCol: { span: 4 },
|
|
wrapperCol: { span: 8, offset: 4 },
|
|
};
|
|
|
|
const App: React.FC = () => {
|
|
const [form] = Form.useForm();
|
|
const [checkNick, setCheckNick] = useState(false);
|
|
|
|
useEffect(() => {
|
|
form.validateFields(['nickname']);
|
|
}, [checkNick, form]);
|
|
|
|
const onCheckboxChange = (e: { target: { checked: boolean } }) => {
|
|
setCheckNick(e.target.checked);
|
|
};
|
|
|
|
const onCheck = async () => {
|
|
try {
|
|
const values = await form.validateFields();
|
|
console.log('Success:', values);
|
|
} catch (errorInfo) {
|
|
console.log('Failed:', errorInfo);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Form form={form} name="dynamic_rule" style={{ maxWidth: 600 }}>
|
|
<Form.Item
|
|
{...formItemLayout}
|
|
name="username"
|
|
label="Name"
|
|
rules={[{ required: true, message: 'Please input your name' }]}
|
|
>
|
|
<Input placeholder="Please input your name" />
|
|
</Form.Item>
|
|
<Form.Item
|
|
{...formItemLayout}
|
|
name="nickname"
|
|
label="Nickname"
|
|
rules={[{ required: checkNick, message: 'Please input your nickname' }]}
|
|
>
|
|
<Input placeholder="Please input your nickname" />
|
|
</Form.Item>
|
|
<Form.Item {...formTailLayout}>
|
|
<Checkbox checked={checkNick} onChange={onCheckboxChange}>
|
|
Nickname is required
|
|
</Checkbox>
|
|
</Form.Item>
|
|
<Form.Item {...formTailLayout}>
|
|
<Button type="primary" onClick={onCheck}>
|
|
Check
|
|
</Button>
|
|
</Form.Item>
|
|
</Form>
|
|
);
|
|
};
|
|
|
|
export default App;
|