mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-13 23:59:12 +08:00
bb121444cc
* fix: Mentions form example not correct display * update snapshots
88 lines
2.0 KiB
Markdown
88 lines
2.0 KiB
Markdown
---
|
|
order: 2
|
|
title:
|
|
zh-CN: 配合 Form 使用
|
|
en-US: With Form
|
|
---
|
|
|
|
## zh-CN
|
|
|
|
受控模式,例如配合 Form 使用。
|
|
|
|
## en-US
|
|
|
|
Controlled mode, for example, to work with `Form`.
|
|
|
|
```tsx
|
|
import { Mentions, Form, Button } from 'antd';
|
|
|
|
const { Option, getMentions } = Mentions;
|
|
|
|
const App = () => {
|
|
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 (rule, value, callback) => {
|
|
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">
|
|
<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 }]}
|
|
>
|
|
<Mentions rows="3" placeholder="You can use @ to ref user here">
|
|
<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>
|
|
);
|
|
};
|
|
|
|
ReactDOM.render(<App />, mountNode);
|
|
```
|