@uiw/react-native
Version:
UIW for React Native
352 lines (314 loc) • 9.93 kB
Markdown
Form 表单
---
集成react-native-uiw表单控件,并支持自定义组件
> 🚧 注意：测试版本谨慎使用。
<!--rehype:style=border-left: 8px solid #ffe564;background-color: #ffe56440;padding: 12px 16px;-->
### 基础示例
<!--DemoStart-->
```jsx mdx:preview&background=#bebebe29
import React from 'react';
import { SafeAreaView } from 'react-native';
import { Form } from '@uiw/react-native';
const FormDemo = () => {
const form = Form.useForm();
const initialValues = { name: '王滴滴' };
const items = [
{
type: 'input',
field: 'name',
name: 'lable',
placeholder: '请输入'
}
];
return (
<SafeAreaView>
<Form form={form} schema={items} initialValues={initialValues} />
</SafeAreaView>
);
}
export default FormDemo
```
<!--End-->
### form.validateFields进行表单验证提交
<!--DemoStart-->
```jsx mdx:preview&background=#bebebe29
import React from 'react';
import { SafeAreaView,Toast } from 'react-native';
import { Form,Button } from '@uiw/react-native';
const FormDemo = () => {
const form = Form.useForm();
const initialValues = {name: ''};
const items = [
{
type: 'input',
field: 'name',
name: 'lable',
attr: {},
placeholder: '请输入',
required: true,
validate: (val) => (!val ? `请输入name` : ''),
}
];
return (
<SafeAreaView>
<Form form={form} schema={items} initialValues={initialValues} />
<Button
type="primary"
onPress={() => {
form
.validateFields()
.then((values) => Toast.success(JSON.stringify(values)))
.catch((errors) => Toast.warning(JSON.stringify(errors)));
}}>
确定
</Button>
</SafeAreaView>
);
};
export default FormDemo
```
<!--End-->
### customComponentList自定义表单组件
<!--DemoStart-->
```jsx mdx:preview&background=#bebebe29
import React from 'react';
import { SafeAreaView, Slider } from 'react-native';
import { Form } from '@uiw/react-native';
const FormDemo = () => {
const form = Form.useForm();
const customComponentList = {
render: <Slider />,
}
const initialValues = {name: ''};
const items = [
{
type: 'input',
field: 'name',
name: 'lable',
placeholder: '请输入',
required: true,
},
{
type: 'render',
field: 'render',
placeholder: '请输入',
name: '自定义',
},
];
return (
<SafeAreaView>
<Form
form={form}
schema={items}
// customComponentList={customComponentList}
initialValues={initialValues}
/>
</SafeAreaView>
);
};
export default FormDemo
```
<!--End-->
### watch监听表单变化
<!--DemoStart-->
```jsx mdx:preview&background=#bebebe29
import React from 'react';
import { SafeAreaView } from 'react-native';
import { Form } from '@uiw/react-native';
const FormDemo = () => {
const form = Form.useForm();
const watch = {
name: (value) => console.log('value', value)
}
const initialValues = {name: ''};
const items = [
{
type: 'input',
field: 'name',
name: 'lable',
placeholder: '请输入',
required: true,
}
];
return (
<SafeAreaView>
<Form form={form} schema={items} watch={watch} initialValues={initialValues} />
</SafeAreaView>
);
};
export default FormDemo
```
<!--End-->
### 动态添加表单list(当type为cardList时)
> ⚠️ 警告:
1.目前仅能嵌套一层cardList
2.我们暂时无法验证到添加的表单项里的每一个字段<!--rehype:style=background: #F08800; color: #fff;-->。
<!--rehype:style=border-left: 8px solid #ffe564;background-color: #ffe56440;padding: 12px 16px;-->
<!--DemoStart-->
```jsx mdx:preview&background=#bebebe29
import React from 'react';
import { SafeAreaView,View,Text } from 'react-native';
import { Form,Button,Flex } from '@uiw/react-native';
const FormDemo = () => {
const form = Form.useForm();
const initialValues = {name: ''};
const items = [
{
type: 'cardList',
field: 'cardList',
placeholder: '请输入',
name: '联系人集合',
renderHeader: (i, { remove ,moveUp,moveDown,moveToTop,moveToBottom }) => (
<View style={{marginTop: 12, display: 'flex', justifyContent: 'space-between', flexDirection: 'row'}}>
<View>
<Text>{`联系人${i + 1}`}</Text>
</View>
<Flex>
<Text style={{marginRight:5}} onPress={() => moveUp()}>上移</Text>
<Text style={{marginRight:5}} onPress={() => moveDown()}>下移</Text>
<Text style={{marginRight:5}} onPress={() => moveToTop()}>置顶</Text>
<Text style={{marginRight:5}} onPress={() => moveToBottom()}>置底</Text>
<Text onPress={() => remove()}>删除</Text>
</Flex>
</View>
),
renderAdd: ({ add }) => (
<View style={{marginTop: 12}}>
<Button onPress={() => add()} type="primary" size="default" bordered={false}>
新增数据
</Button>
</View>
),
items: [
{
type: 'input',
field: 'name',
placeholder: '请输入',
name: '联系人姓名',
},
{
type: 'input',
field: 'phone',
placeholder: '请输入',
name: '联系人电话',
},
],
},
];
return (
<SafeAreaView>
<Form form={form} schema={items} initialValues={initialValues} />
</SafeAreaView>
);
};
export default FormDemo
```
<!--End-->
### class组件获取form
<!--DemoStart-->
```jsx mdx:preview&background=#bebebe29
import React from 'react'
import { SafeAreaView } from 'react-native';
import { Form, Button } from '@uiw/react-native';
class FormDemo extends React.Component {
render(){
const { form } = this.props
const schema = [
{
type: 'input',
field: 'name',
name: 'lable',
attr: {},
required: true,
placeholder: '请输入',
validate: (val) => (!val ? `请输入name` : ''),
}
];
return (
<SafeAreaView>
<Form
form={form}
schema={schema}
initialValues={{ name: '王滴滴' }}
/>
<Button
type="primary"
onPress={() => form.validateFields().then((values) => {}).catch((errors) => {}) }>
确定
</Button>
</SafeAreaView>
);
}
}
const FormComponent = Form.create(FormDemo)
export default FormComponent;
```
### Form.Item
<!--DemoStart-->
```jsx mdx:preview&background=#bebebe29
import React from 'react';
import { SafeAreaView,TextInput } from 'react-native';
import { Form } from '@uiw/react-native';
const Input = ({ value, onChange, ...others }) => {
return (
<TextInput
value={value}
onChangeText={(value) => {
onChange?.(value);
}}
{...others}
/>
);
};
const FormDemo = () => {
const form = Form.useForm();
const watch = {
name: (value) => console.log('value', value)
}
return (
<SafeAreaView>
<Form type="custom" form={form} watch={watch} changeValidate={true}>
<Form.Item required field="name" name="姓名" validate={(val) => (!val ? '请输入姓名' : '')}>
<Input placeholder='请输入' />
</Form.Item>
</Form>
</SafeAreaView>
);
};
export default FormDemo
```
<!--End-->
### Props
| 参数 | 说明 | 类型 | 默认值 |
|------|------|-----|------|
| `schema` | 表单集合 | FormItemsProps[] | [] |
| `form` | 经 Form.useForm() 创建的 form 控制实例，不提供时会自动创建 | FormInstance<`FormData`, `FieldValue`, `FieldKey`> | - |
| `initialValues` | 表单默认值，只有初始化以及重置时生效 | Partial<`FormData`> | - |
| `mode` | 支持默认和卡片两种模式 | `default` \| `card` | | default |
| `type` | 表单布局模式 | `json` \| `custom` | `json` |
| `changeValidate` | 表单是否在onChange时进行验证 | boolean | false |
| `watch` | 监听表单字段变化 | Partial<Record<string, (value: unknown) => void>> | - |
| `customComponentList` | 自定义组件 | Partial<Record<string, JSX.Element>> | - |
### FormItemsProps
| 参数 | 说明 | 类型 | 默认值 |
|------|------|-----|------|
| `field` | 字段名 | string | - |
| `type` | 字段类型(`input` \| `textArea` \| `slider` \| `rate` \| `radio` \| `search`\| `switch`\| `checkBox`\| `stepper`\| `picker`\| `treeSelect`\| `datePicker`\| `cardList`) | string | - |
| `name` | 标签名 | string | - |
| `validate` | 验证规则 | RulesOption['validate'] | - |
| `options` | 集合 | Array<{ label: string; value: KeyType }> | - |
| `attr` | 表单控件props | any | - |
| `required` | 展示是否必填 | boolean | - |
| `hide` | 是否隐藏 | boolean | - |
| `renderHeader` | 当type为cardList生效,渲染每一项的头部内容 | (index:number,{ remove }:{ remove:()=>void })=>React.ReactNode | - |
| `renderAdd` | 当type为cardList生效,渲染添加按钮的文案 | ( { add }:{ add:()=>void } )=>React.ReactNode | - |
| `items` | 当type为cardList生效,配置表单项 | Omit<FormItemsProps, `validate` \| `required`>[] | - |
### FormInstanceProps
| 参数 | 说明 | 类型 | 默认值 |
|------|------|-----|------|
| `getFieldValue` | 获取对应字段名的值 | (field: FieldKey) => FieldValue | - |
| `setFieldValue` | 设置对应字段名的值 | (field: FieldKey, value: FieldValue) => void | - |
| `resetFieldValue` | 重制表单 | () => void | - |
| `validate` | 触发验证 | () => Partial<Record<string, string>> | - |
| `validateFields` | 触发表单验证获取表单数据 | () => Promise<FormData> \| any | - |
| `getInnerMethods` | 组件内部方法集合 | (inner?: boolean) => InnerMethodsReturnType<FormData> | - |