Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs(form): add customized form controls example #3112

Merged
merged 1 commit into from
Sep 24, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
87 changes: 87 additions & 0 deletions src/form/_example/customized-form-controls.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
import React from 'react';
import { Form, Input, Button, MessagePlugin, Space, Select } from 'tdesign-react';
import type { FormProps } from 'tdesign-react';

interface ICourseSelect {
value?: {
type?: string;
name?: string;
};
onChange?: (v: { type?: string; name?: string }) => void;
}

const { FormItem } = Form;

function CourseSelect(props: ICourseSelect) {
const { value, onChange } = props;

return (
<Space>
<Select
options={[
{
label: '数学',
value: 'math',
},
{
label: '英语',
value: 'english',
},
]}
value={value?.type}
onChange={(v) => {
onChange?.({
...value,
type: v as string,
});
}}
placeholder="请选择课程类型"
/>
<Input
value={value?.name}
onChange={(v) => {
onChange?.({
...value,
name: v,
});
}}
placeholder="请输入课程名称"
/>
</Space>
);
}

export default function BaseForm() {
const [form] = Form.useForm();

const onSubmit: FormProps['onSubmit'] = (e) => {
console.log(e);
if (e.validateResult === true) {
MessagePlugin.info('提交成功');
}
};
const setData = () => {
form.setFieldsValue?.({
course: {
type: 'math',
name: '线性代数',
},
});
};

return (
<Form form={form} onSubmit={onSubmit} colon labelWidth={100}>
<FormItem label="课程" name="course">
<CourseSelect />
</FormItem>
<FormItem style={{ marginLeft: 100 }}>
<Button type="submit" theme="primary">
提交
</Button>
<Button theme="primary" onClick={setData} style={{ marginLeft: 12 }}>
设置信息
</Button>
</FormItem>
</Form>
);
}
10 changes: 8 additions & 2 deletions src/form/form.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,22 @@

### 复杂嵌套数据结构表单

可给 `name` 传入数组整理成对象嵌套数据结构
可给 `name` 传入数组整理成对象嵌套数据结构

{{ nested-data }}

### 动态增减嵌套表单

可使用 `Form.FormList` 组件创建动态表单
可使用 `Form.FormList` 组件创建动态表单

{{ form-list }}

### 自定义表单控件

可以使用 `Form.FormItem` 包裹自定义组件并在组件中接受 `value` 和 `onChange` 的入参,实现自定义表单控件。

{{ customized-form-controls }}

## Hooks

### Form.useForm
Expand Down
Loading
Loading