2019-05-17 12:05:03 +08:00
|
|
|
---
|
|
|
|
order: 2
|
|
|
|
title:
|
|
|
|
zh-CN: 配合 Form 使用
|
|
|
|
en-US: With Form
|
|
|
|
---
|
|
|
|
|
|
|
|
## zh-CN
|
|
|
|
|
|
|
|
受控模式,例如配合 Form 使用。
|
|
|
|
|
|
|
|
## en-US
|
|
|
|
|
|
|
|
Controlled mode, for example, to work with `Form`.
|
|
|
|
|
2019-07-03 20:14:39 +08:00
|
|
|
```tsx
|
2019-05-17 12:05:03 +08:00
|
|
|
import { Mentions, Form, Button } from 'antd';
|
|
|
|
|
|
|
|
const { Option, getMentions } = Mentions;
|
|
|
|
|
2019-07-03 20:14:39 +08:00
|
|
|
const App = () => {
|
|
|
|
const [form] = Form.useForm();
|
|
|
|
|
|
|
|
const onReset = () => {
|
|
|
|
form.resetFields();
|
2019-05-17 12:05:03 +08:00
|
|
|
};
|
|
|
|
|
2019-07-03 20:14:39 +08:00
|
|
|
const onFinish = async () => {
|
|
|
|
try {
|
|
|
|
const values = await form.validateFields();
|
|
|
|
console.log('Submit:', values);
|
|
|
|
} catch (errInfo) {
|
|
|
|
console.log('Error:', errInfo);
|
|
|
|
}
|
2019-05-17 12:05:03 +08:00
|
|
|
};
|
|
|
|
|
2020-12-17 15:09:18 +08:00
|
|
|
const checkMention = async (_: any, value: string) => {
|
2019-05-17 12:05:03 +08:00
|
|
|
const mentions = getMentions(value);
|
2019-07-03 20:14:39 +08:00
|
|
|
|
2019-05-17 12:05:03 +08:00
|
|
|
if (mentions.length < 2) {
|
2019-07-03 20:14:39 +08:00
|
|
|
throw new Error('More than one must be selected!');
|
2019-05-17 12:05:03 +08:00
|
|
|
}
|
|
|
|
};
|
|
|
|
|
2019-07-03 20:14:39 +08:00
|
|
|
return (
|
|
|
|
<Form form={form} layout="horizontal" onFinish={onFinish}>
|
|
|
|
<Form.Item
|
2019-08-29 23:41:46 +08:00
|
|
|
name="coders"
|
2019-07-03 20:14:39 +08:00
|
|
|
label="Top coders"
|
|
|
|
labelCol={{ span: 6 }}
|
|
|
|
wrapperCol={{ span: 16 }}
|
|
|
|
rules={[{ validator: checkMention }]}
|
|
|
|
>
|
2020-12-17 15:09:18 +08:00
|
|
|
<Mentions rows={1}>
|
2019-08-29 23:41:46 +08:00
|
|
|
<Option value="afc163">afc163</Option>
|
|
|
|
<Option value="zombieJ">zombieJ</Option>
|
|
|
|
<Option value="yesmeck">yesmeck</Option>
|
|
|
|
</Mentions>
|
|
|
|
</Form.Item>
|
|
|
|
<Form.Item
|
|
|
|
name="bio"
|
|
|
|
label="Bio"
|
|
|
|
labelCol={{ span: 6 }}
|
|
|
|
wrapperCol={{ span: 16 }}
|
|
|
|
rules={[{ required: true }]}
|
|
|
|
>
|
2020-12-17 15:09:18 +08:00
|
|
|
<Mentions rows={3} placeholder="You can use @ to ref user here">
|
2019-07-03 20:14:39 +08:00
|
|
|
<Option value="afc163">afc163</Option>
|
|
|
|
<Option value="zombieJ">zombieJ</Option>
|
|
|
|
<Option value="yesmeck">yesmeck</Option>
|
|
|
|
</Mentions>
|
|
|
|
</Form.Item>
|
|
|
|
<Form.Item wrapperCol={{ span: 14, offset: 6 }}>
|
|
|
|
<Button htmlType="submit" type="primary">
|
|
|
|
Submit
|
|
|
|
</Button>
|
|
|
|
|
|
|
|
<Button htmlType="button" onClick={onReset}>
|
|
|
|
Reset
|
|
|
|
</Button>
|
|
|
|
</Form.Item>
|
|
|
|
</Form>
|
|
|
|
);
|
|
|
|
};
|
2019-05-17 12:05:03 +08:00
|
|
|
|
2019-07-03 20:14:39 +08:00
|
|
|
ReactDOM.render(<App />, mountNode);
|
2019-05-17 12:05:03 +08:00
|
|
|
```
|