mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-15 17:31:25 +08:00
98 lines
2.2 KiB
TypeScript
98 lines
2.2 KiB
TypeScript
import { Button, Form, Mentions, Space } from 'antd';
|
|
import React from 'react';
|
|
|
|
const { getMentions } = Mentions;
|
|
|
|
const App: React.FC = () => {
|
|
const [form] = Form.useForm();
|
|
|
|
const onReset = () => {
|
|
form.resetFields();
|
|
};
|
|
|
|
const onFinish = async () => {
|
|
try {
|
|
const values = await form.validateFields();
|
|
console.log('Submit:', values);
|
|
} catch (errInfo) {
|
|
console.log('Error:', errInfo);
|
|
}
|
|
};
|
|
|
|
const checkMention = async (_: any, value: string) => {
|
|
const mentions = getMentions(value);
|
|
|
|
if (mentions.length < 2) {
|
|
throw new Error('More than one must be selected!');
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Form form={form} layout="horizontal" onFinish={onFinish}>
|
|
<Form.Item
|
|
name="coders"
|
|
label="Top coders"
|
|
labelCol={{ span: 6 }}
|
|
wrapperCol={{ span: 16 }}
|
|
rules={[{ validator: checkMention }]}
|
|
>
|
|
<Mentions
|
|
rows={1}
|
|
options={[
|
|
{
|
|
value: 'afc163',
|
|
label: 'afc163',
|
|
},
|
|
{
|
|
value: 'zombieJ',
|
|
label: 'zombieJ',
|
|
},
|
|
{
|
|
value: 'yesmeck',
|
|
label: 'yesmeck',
|
|
},
|
|
]}
|
|
/>
|
|
</Form.Item>
|
|
<Form.Item
|
|
name="bio"
|
|
label="Bio"
|
|
labelCol={{ span: 6 }}
|
|
wrapperCol={{ span: 16 }}
|
|
rules={[{ required: true }]}
|
|
>
|
|
<Mentions
|
|
rows={3}
|
|
placeholder="You can use @ to ref user here"
|
|
options={[
|
|
{
|
|
value: 'afc163',
|
|
label: 'afc163',
|
|
},
|
|
{
|
|
value: 'zombieJ',
|
|
label: 'zombieJ',
|
|
},
|
|
{
|
|
value: 'yesmeck',
|
|
label: 'yesmeck',
|
|
},
|
|
]}
|
|
/>
|
|
</Form.Item>
|
|
<Form.Item wrapperCol={{ span: 14, offset: 6 }}>
|
|
<Space wrap>
|
|
<Button htmlType="submit" type="primary">
|
|
Submit
|
|
</Button>
|
|
<Button htmlType="button" onClick={onReset}>
|
|
Reset
|
|
</Button>
|
|
</Space>
|
|
</Form.Item>
|
|
</Form>
|
|
);
|
|
};
|
|
|
|
export default App;
|