mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-05 01:19:45 +08:00
7fd093bd0a
* docs: add general components TS demo * docs: add layout components TS demo * docs: add navigation components TS demo * docs: add data entry components TS demo * chore(deps): add types for qs * docs: add data display TS demo * docs: add feedback components TS demo * docs: add other components TS demo * chore(deps): add types * docs: unified demo code style * docs: fix lint error * docs: add demo TS type * docs: fix demo TS type * test: update snapshot * docs: fix TS demo * feat: update Rate character type * docs: fix lint error * feat: update Rate character type * feat: update Rate character type
119 lines
3.0 KiB
Markdown
119 lines
3.0 KiB
Markdown
---
|
||
order: 2
|
||
title:
|
||
zh-CN: 表单方法调用（Class component）
|
||
en-US: Form methods (Class component)
|
||
---
|
||
|
||
## zh-CN
|
||
|
||
我们推荐使用 `Form.useForm` 创建表单数据域进行控制。如果是在 class component 下，你也可以通过 `ref` 获取数据域。
|
||
|
||
## en-US
|
||
|
||
We recommend use `Form.useForm` to create data control. If you are using class component, you can get it by `ref`.
|
||
|
||
```tsx
|
||
import React from 'react';
|
||
import { Form, Input, Button, Select } from 'antd';
|
||
import type { FormInstance } from 'antd/es/form';
|
||
|
||
const { Option } = Select;
|
||
|
||
const layout = {
|
||
labelCol: { span: 8 },
|
||
wrapperCol: { span: 16 },
|
||
};
|
||
const tailLayout = {
|
||
wrapperCol: { offset: 8, span: 16 },
|
||
};
|
||
|
||
class App extends React.Component {
|
||
formRef = React.createRef<FormInstance>();
|
||
|
||
onGenderChange = (value: string) => {
|
||
switch (value) {
|
||
case 'male':
|
||
this.formRef.current!.setFieldsValue({ note: 'Hi, man!' });
|
||
return;
|
||
case 'female':
|
||
this.formRef.current!.setFieldsValue({ note: 'Hi, lady!' });
|
||
return;
|
||
case 'other':
|
||
this.formRef.current!.setFieldsValue({ note: 'Hi there!' });
|
||
}
|
||
};
|
||
|
||
onFinish = (values: any) => {
|
||
console.log(values);
|
||
};
|
||
|
||
onReset = () => {
|
||
this.formRef.current!.resetFields();
|
||
};
|
||
|
||
onFill = () => {
|
||
this.formRef.current!.setFieldsValue({
|
||
note: 'Hello world!',
|
||
gender: 'male',
|
||
});
|
||
};
|
||
|
||
render() {
|
||
return (
|
||
<Form {...layout} ref={this.formRef} name="control-ref" onFinish={this.onFinish}>
|
||
<Form.Item name="note" label="Note" rules={[{ required: true }]}>
|
||
<Input />
|
||
</Form.Item>
|
||
<Form.Item name="gender" label="Gender" rules={[{ required: true }]}>
|
||
<Select
|
||
placeholder="Select a option and change input text above"
|
||
onChange={this.onGenderChange}
|
||
allowClear
|
||
>
|
||
<Option value="male">male</Option>
|
||
<Option value="female">female</Option>
|
||
<Option value="other">other</Option>
|
||
</Select>
|
||
</Form.Item>
|
||
<Form.Item
|
||
noStyle
|
||
shouldUpdate={(prevValues, currentValues) => prevValues.gender !== currentValues.gender}
|
||
>
|
||
{({ getFieldValue }) =>
|
||
getFieldValue('gender') === 'other' ? (
|
||
<Form.Item
|
||
name="customizeGender"
|
||
label="Customize Gender"
|
||
rules={[{ required: true }]}
|
||
>
|
||
<Input />
|
||
</Form.Item>
|
||
) : null
|
||
}
|
||
</Form.Item>
|
||
<Form.Item {...tailLayout}>
|
||
<Button type="primary" htmlType="submit">
|
||
Submit
|
||
</Button>
|
||
<Button htmlType="button" onClick={this.onReset}>
|
||
Reset
|
||
</Button>
|
||
<Button type="link" htmlType="button" onClick={this.onFill}>
|
||
Fill form
|
||
</Button>
|
||
</Form.Item>
|
||
</Form>
|
||
);
|
||
}
|
||
}
|
||
|
||
export default App;
|
||
```
|
||
|
||
```css
|
||
#components-form-demo-control-ref .ant-btn {
|
||
margin-right: 8px;
|
||
}
|
||
```
|