React Native 封装一个表单组件
使用 react-native-modal-datetime-picker 第三方组件，只能选择年月日，时间不进行处理的话是默认当前时间（为了适应后端接口需要，我这里设置了个 initTime ，可以手动将时间设置为 00:00:00 或者 23:59:59）。使用 react-native-dropdown-picker 第三方实现，现在多选 multiple 的选择结果值有问题，仍是单选结果。
·
实现
1. 实现所有表单项的非空校验、取值、赋值、提交、重置功能
2. 两种提交方式：实时根据输入的内容提交表单、点击提交按钮提交表单
3. 两种不同表单样式
4. 基础按钮和自定义按钮（可以自定义文字、颜色、事件）
效果
搜索表单示例
提交表单示例
包含
Input 输入框
使用 elements 的 Input 组件，集成 Formik 和 Yup 表单校验。
Select 选择框
使用 react-native-dropdown-picker 第三方实现，现在多选 multiple 的选择结果值有问题，仍是单选结果。
Checkbox 复选框
自己用 View 手写了一个，返回数组形式。
日期/时间选择器
使用 react-native-modal-datetime-picker 第三方组件，只能选择年月日，时间不进行处理的话是默认当前时间（为了适应后端接口需要，我这里设置了个 initTime ，可以手动将时间设置为 00:00:00 或者 23:59:59）。
自定义表单项（类似于 vue 中的插槽）
在 formItems 配置只需在 slot 传入组件名称，不需要传入整个组件，需要在 SlotComponent 文件中引入组件。（这里不知道为什么直接传入组件在 form 表单读不到，明明写其他组件的时候可以......）
封装代码（含使用说明）
代码能用，但感觉有点小乱，后面有时间再优化下。
配置示例
/** 搜索表单 配置示例：
* const formItems = [
* {
* type: 'input',
* key: 'key',
* label: '标签',
* value: '',
* leftIcon: 'Search',
* showLabel: true, // 是否显示label
* },
* {
* type: 'checkbox',
* key: 'key',
* label: '标签',
* options: options,
* multiple: true, // 是否多选
* showLabel: true, // 是否显示label
* }
* ];
* let whole = {
* row: 1, // 一行放多少个输入框(1/2/3) 默认全部放一行
* showClose: true, // 是否显示 右侧清空输入框图标
* }
*//** 提交表单 配置示例：
* const formItems = [
* {
* type: 'input',
* key: 'key',
* label: '标签',
* value: '',
* required: true, // 是否必填
* showClose: true, // 单独一项是否显示 右侧清空输入框图标
* showLabel: true, // 是否显示label
* isSubmitForm: true, // 是否为提交表单，与搜索表单部分样式不一样
* disabled: true
* },
* {
* type: 'checkbox',
* key: 'key',
* label: '标签',
* options: options,
* multiple: true, // 是否多选
* showLabel: true, // 是否显示label
* required: true, // 是否必填
* showClose: true, // 单独一项是否显示 右侧清空输入框图标
* showLabel: true, // 是否显示label
* isSubmitForm: true, // 是否为提交表单，与搜索表单部分样式不一样
* disabled: true
* }
* ];
* let whole = {
* row: 1, // 一行放多少个输入框(1/2/3) 默认全部放一行
* showClose: true, // 是否显示 右侧清空输入框图标
* buttons: {
* show: true, // 是否显示按钮（不包括自定义按钮）：为true显示按钮；为false不显示按钮
* isSubmit: true, // 是否为提交表单：为true，按下按钮才触发onForm；为false，表单项的值改变就会触发onForm
* submitText: '搜索', // 提交按钮文本，默认为 提交
* hideBaseButton: true,
* // 自定义按钮，点击执行 onForm 方法
* customButton: [
* {
* text: '通过',
* onPress: () => submit(1)
* },
* {
* text: '拒绝',
* color: '#CF4343',
* onPress: () => submit(0)
* }
* ],
* position: 'left', // 按钮位置 left/right/center，默认right
* }
* }
*/Form.tsx
/**
* 使用：
* <Form formItems={formItems} whole={whole} onForm={onForm} disabled={false} ref={formRef} />
* 表单项配置
* formItems 每一项是一个输入框的配置 (type, key, label, value 必传)
* let formItems = [
* {
* type: 'input',
* key: 'username',
* label: '用户名',
* value: 'text',
* required: true, // 是否必填
* leftIcon: 'Search', // 左侧图标
* showClose: true, // 单独一项是否显示 右侧清空输入框图标
* showLabel: true, // 是否显示label
* isSubmitForm: true, // 是否为提交表单，与搜索表单部分样式不一样
* },
* {
* type: 'textarea',
* key: 'suggest',
* label: '建议',
* value: '',
* required: true, // 是否必填
* showClose: true, // 单独一项是否显示 右侧清空输入框图标
* showLabel: true, // 是否显示label
* isSubmitForm: true, // 是否为提交表单，与搜索表单样式不一样
* },
* // 支持 单选
* {
* type: 'select',
* key: 'gender',
* label: '性别',
* options: [],
* showLabel: true, // 是否显示label
* isSubmitForm: true, // 是否为提交表单，与搜索表单样式不一样
* },
* // 支持 单选/多选
* {
* type: 'checkbox',
* key: 'selectList',
* label: '选择',
* options: selectList,
* multiple: true, // 是否多选
* showLabel: true, // 是否显示label
* },
* {
* type: 'dateTime',
* key: 'startTime',
* label: '开始日期',
* value: '',
* initTime: true // 是否为固定时间，key 中包含 start 的调整为 00:00:00，包含 end 的调整为 23:59:59
* },
* {
* type: 'slot',
* key: 'nameSlot',
* label: '选择名称',
* slot: 'SelectPeople', // 组件名称需要引入到 SlotComponent 文件中
* },
* ];
* 整体配置
* let whole = {
* row: 1, // 一行放多少个输入框(1/2/3) 默认全部放一行
* showClose: true, // 是否显示 右侧清空输入框图标
* buttons: {
* show: true, // 是否显示按钮（不包括自定义按钮）：为true显示按钮；为false不显示按钮
* isSubmit: true, // 是否为提交表单：为true，按下按钮才触发onForm；为false，表单项的值改变就会触发onForm
* submitText: '搜索', // 提交按钮文本，默认为 提交
* hideBaseButton: true,
* // 自定义按钮，点击执行 onForm 方法
* customButton: [
* {
* text: '通过',
* onPress: () => submit(1)
* },
* {
* text: '拒绝',
* color: '#CF4343',
* onPress: () => submit(0)
* }
* ],
* position: 'left', // 按钮位置 left/right/center，默认right
* }
* }
*
* const onForm = (e: any) => {
* console.log('获取表单的值', e)
* }
*
* 调用赋值方法：formRef.current.setFormValue(form)
*/
import React, {
useEffect,
useRef,
useState,
forwardRef,
useImperativeHandle,
} from 'react';
import {Text, View, StyleSheet, Platform, TouchableOpacity} from 'react-native';
import {Input} from '@rneui/themed';
import * as icons from 'react-native-feather';
import {Calendar} from 'react-native-feather';
import {Formik, useFormikContext} from 'formik';
import * as Yup from 'yup';
import DropDownPicker from 'react-native-dropdown-picker';
import DateTimePickerModal from 'react-native-modal-datetime-picker';
import mainStyles from '@/style/css';
import {parseTime} from '@/utils/timeTool';
import {cloneDeep} from 'lodash';
import SlotComponent from './SlotComponent';
// 表单项配置
const FormInput = forwardRef((props: any, ref: any) => {
const [formItems, setFormItems] = useState(props?.formItems);
let {whole, onForm, disabled} = props;
let buttons = whole?.buttons ? whole?.buttons : {};
const {values}: any = useFormikContext();
const inputItemRef = useRef(null);
const selectRef = useRef(null);
const checkboxRef = useRef(null);
const dateTimePickerRef = useRef(null);
const slotItemRef = useRef(null);
// 表单赋值回显
const setFormItemValue = (form: any) => {
const copyFormItems = formItems.map((v: any) => {
if (v.key && form.hasOwnProperty(v.key)) {
v.value = form[v.key];
if (v.type === 'input' || v.type === 'textarea') {
if (inputItemRef.current) {
inputItemRef.current.setInputValue(v.key);
}
} else if (v.type === 'checkbox') {
if (checkboxRef.current) {
checkboxRef.current.setCheckbox(v.value);
}
}
}
return v;
});
setFormItems(copyFormItems);
};
// 使用 useImperativeHandle 将里面的方法暴露给父组件
useImperativeHandle(ref, () => ({
setFormItemValue,
getFormItemValue,
}));
// 获取表单所有值
const getFormItemValue = (params: any) => {
let requiredArr: any = [];
formItems.map((v: any) => {
if (v.required) {
if (
(v.type === 'input' || v.type === 'textarea') &&
inputItemRef.current
) {
requiredArr.push(inputItemRef.current.submit());
} else if (v.type === 'checkbox' && checkboxRef.current) {
requiredArr.push(checkboxRef.current.checkboxRequired(v.key));
} else if (v.type === 'dateTime' && dateTimePickerRef.current) {
requiredArr.push(dateTimePickerRef.current.dateTimeRequired(v.key));
} else if (v.type === 'slot' && slotItemRef.current) {
requiredArr.push(slotItemRef.current.slotRequired(v.key));
}
}
});
Promise.all(requiredArr).then(() => {
let obj: any = {};
formItems.map((v: any) => {
obj[v.key] = v.value;
});
// 回传给父组件
if (buttons?.customButton && buttons?.customButton.length > 0)
onForm({...obj, ...values}, params);
else onForm({...obj, ...values});
});
};
// 重置表单
const resetForm = () => {
let copyFormItems: any = cloneDeep(formItems || []);
copyFormItems.map((v: any) => {
if (v.type === 'input' || v.type === 'textarea') {
if (inputItemRef.current) {
inputItemRef.current.cleanInput(v.key);
}
} else if (v.type === 'checkbox') {
if (checkboxRef.current) {
checkboxRef.current.cleanCheckbox(v.key);
}
} else if (v.type === 'dateTime') {
if (dateTimePickerRef.current) {
dateTimePickerRef.current.cleanDateTime(v.key);
}
} else {
v.value = '';
}
});
setFormItems(copyFormItems);
};
useEffect(() => {
resetForm();
}, []);
useEffect(() => {
if (!buttons || !buttons.isSubmit) getFormItemValue();
}, [formItems]);
useEffect(() => {
if (!buttons || !buttons.isSubmit) getFormItemValue();
}, [values]);
let RightIcon = icons['X'];
const formItem = formItems.map((v: any, i: number) => {
return (
<View
style={
whole?.row == 1
? [styles.rowView, {minWidth: '98%'}]
: whole?.row == 2
? [styles.rowView, {minWidth: '48%'}]
: whole?.row == 3
? [styles.rowView, {minWidth: '32%'}]
: styles.rowView
}>
{v?.type === 'input' || v?.type === 'textarea' ? (
<InputItem
item={v}
whole={whole}
values={values}
methods={useFormikContext()}
RightIcon={RightIcon}
disabled={disabled}
ref={inputItemRef}
/>
) : v?.type === 'select' ? (
<SelectItem
item={v}
formItems={formItems}
i={i}
buttons={buttons}
setFormItems={setFormItems}
getFormItemValue={getFormItemValue}
disabled={disabled}
ref={selectRef}
/>
) : v?.type === 'checkbox' ? (
<CheckboxItem
item={v}
formItems={formItems}
buttons={buttons}
setFormItems={setFormItems}
getFormItemValue={getFormItemValue}
disabled={disabled}
ref={checkboxRef}
/>
) : v?.type === 'dateTime' ? (
<DateTimePickerItem
item={v}
formItems={formItems}
buttons={buttons}
setFormItems={setFormItems}
getFormItemValue={getFormItemValue}
disabled={disabled}
ref={dateTimePickerRef}
/>
) : v?.type === 'slot' ? (
<SlotItem
item={v}
formItems={formItems}
buttons={buttons}
setFormItems={setFormItems}
getFormItemValue={getFormItemValue}
disabled={disabled}
ref={slotItemRef}
/>
) : (
<></>
)}
</View>
);
});
return (
<View>
<View style={styles.inputItemView}>{formItem}</View>
{buttons?.show && !disabled ? (
<View
style={[
styles.buttonView,
buttons?.position === 'left'
? {justifyContent: 'flex-start'}
: buttons?.position === 'center'
? {}
: {justifyContent: 'flex-end'},
]}>
{!buttons?.hideBaseButton ? (
<TouchableOpacity onPress={() => resetForm()}>
<Text style={mainStyles.formWhiteButton}>重置</Text>
</TouchableOpacity>
) : (
<></>
)}
{buttons?.customButton && buttons?.customButton.length > 0 ? (
buttons?.customButton.map((v: any) => {
return (
<TouchableOpacity
onPress={v?.onPress ? v?.onPress : getFormItemValue}
style={{marginLeft: 4}}>
<Text
style={[
mainStyles.formBlueButton,
v?.color
? {
borderColor: v?.color,
backgroundColor: v?.color,
}
: {},
]}>
{v?.text}
</Text>
</TouchableOpacity>
);
})
) : (
<View>
{!buttons?.hideBaseButton ? (
<TouchableOpacity
onPress={getFormItemValue}
style={{marginLeft: 4}}>
<Text style={mainStyles.formBlueButton}>
{buttons.submitText ? buttons.submitText : '提交'}
</Text>
</TouchableOpacity>
) : (
<></>
)}
</View>
)}
</View>
) : (
<></>
)}
</View>
);
});
// 输入框组件
const InputItem = forwardRef((props: any, ref: any) => {
const {item, methods, values, whole, RightIcon, disabled} = props;
const {
setValues,
errors,
touched,
handleChange,
handleBlur,
handleSubmit,
}: any = methods;
// 赋值
const setInputValue = (key: string) => {
setValues({[key]: item.value});
};
// 清空输入框
const cleanInput = (key: string) => {
setValues({...values, [key]: ''});
};
useEffect(() => {
// 最开始执行一次清空输入框操作，确保在没有编辑输入框的情况下，表单校验也生效
cleanInput(item.key);
}, []);
useImperativeHandle(ref, () => ({
cleanInput,
setInputValue,
submit,
}));
const submit = () => {
return new Promise((resolve, reject) => {
handleSubmit();
if (errors && Object.keys(errors).length > 0) {
reject(errors);
return;
} else {
resolve(true);
}
});
};
// 动态引入图标
let LeftIcon = icons[item?.leftIcon];
return (
<View>
{item?.showLabel ? (
<Text>
<RequiredView required={item?.required} />
<Text style={styles.labelText}>{item.label}</Text>
</Text>
) : (
<></>
)}
<View
style={[
styles.inputView,
item.isSubmitForm ? styles.greyBorder : styles.blueBorder,
]}>
<Input
value={values[item.key]}
onChangeText={handleChange(item.key)}
placeholder={item?.placeholder ? item.placeholder : item?.label}
errorMessage={''}
inputContainerStyle={{borderBottomWidth: 0, borderColor: '#7FABE7'}}
inputStyle={styles.input}
containerStyle={
item?.type === 'textarea'
? {
marginLeft: -13,
marginRight: -12,
marginBottom: -15,
paddingTop: 5,
maxHeight: 60,
}
: {height: 28, margin: -12, marginLeft: -13}
}
leftIcon={
LeftIcon ? (
<LeftIcon stroke="#7F7F8E" width={16} height={16} />
) : (
<></>
)
}
rightIcon={
(item?.showClose || whole?.showClose) && !disabled ? (
<RightIcon
stroke="#7F7F8E"
width={16}
height={16}
style={{marginRight: -15}}
onPress={() => cleanInput(item.key)}
/>
) : (
<></>
)
}
multiline={item?.type === 'textarea'}
numberOfLines={item?.type === 'textarea' ? 4 : 1}
disabled={disabled}
/>
</View>
{touched[item.key] && errors[item.key] && (
<Text style={styles.errorText}>{errors[item.key]}</Text>
)}
</View>
);
});
// 下拉框组件 单选
const SelectItem = forwardRef((props: any, ref: any) => {
let {item, formItems, i, buttons, setFormItems, getFormItemValue, disabled} =
props;
const [copyFormItems, setCopyFormItems] = useState(formItems);
const [copyItem, setCopyItem] = useState(item);
// 非空校验
const selectRequired = (key: string) => {
return new Promise((resolve, reject) => {
if (item?.required) {
let copy = copyFormItems.map((v: any) => {
if (key === v.key) {
if (!v.value) {
v.showError = true;
reject(v.label + '不能为空');
} else {
v.showError = false;
resolve(true);
}
setCopyItem({...v});
return {...v};
}
return v;
});
setCopyFormItems(copy);
} else {
let copy = copyFormItems.map((v: any) => {
if (key === v.key) {
v.showError = false;
setCopyItem({...v});
return {...v};
}
return v;
});
setCopyFormItems(copy);
resolve(true);
}
});
};
// 打开下拉选项
const handleOpenChange = (index: number, isOpen: boolean) => {
const updatedCopy = copyFormItems.map((item: any, i: number) => {
if (i === index) {
return {...item, open: isOpen};
}
return item;
});
setCopyFormItems(updatedCopy);
};
// 获取选定值
const handleSelectChange = (index: number, val: any) => {
const updatedCopy = copyFormItems.map((item: any, i: number) => {
if (i === index) {
item.value = val();
return {...item, value: item.value};
}
return item;
});
setCopyFormItems(updatedCopy);
};
// 清空选定值
const cleanDropDownValue = () => {
const updatedCopy = copyFormItems.map((item: any) => {
return {...item, value: ''};
});
setCopyFormItems(updatedCopy);
};
useImperativeHandle(ref, () => ({
cleanDropDownValue,
selectRequired,
}));
useEffect(() => {
setFormItems(copyFormItems);
}, [copyFormItems]);
useEffect(() => {
if (!buttons || !buttons.isSubmit) getFormItemValue();
}, [formItems]);
return (
<View>
{item?.showLabel ? (
<Text>
<RequiredView required={item?.required} />
<Text style={styles.labelText}>{item.label}</Text>
</Text>
) : (
<></>
)}
<View
style={[
styles.inputView,
item.isSubmitForm ? styles.greyBorder : styles.blueBorder,
{zIndex: 10000 - i},
]}>
<DropDownPicker
open={item?.open}
value={item?.value}
items={item?.options}
setOpen={(isOpen: any) => handleOpenChange(i, isOpen)}
setValue={val => handleSelectChange(i, val)}
multiple={item?.multiple}
min={0}
max={item.maxSelect ? item.maxSelect : 5}
placeholder={item?.placeholder ? item.placeholder : item?.label}
style={{borderWidth: 0, backgroundColor: 'transparent'}}
textStyle={styles.placeholderText}
labelStyle={{color: '#7F7F8E', fontSize: 12}}
containerStyle={{height: 28, margin: -12}}
placeholderStyle={styles.placeholderText}
arrowIconStyle={{width: 14, height: 14}}
dropDownContainerStyle={styles.dropDownContainerStyle}
dropDownDirection="AUTO"
scrollViewProps={{
nestedScrollEnabled: true,
}}
disabled={disabled}
/>
</View>
{copyItem.showError ? (
<Text style={styles.errorText}>{copyItem.label}不能为空 </Text>
) : (
<></>
)}
</View>
);
});
// 多选组件
const CheckboxItem = forwardRef((props: any, ref: any) => {
let {item, formItems, buttons, setFormItems, getFormItemValue, disabled} =
props;
const [copyFormItems, setCopyFormItems] = useState(formItems);
const [copyItem, setCopyItem] = useState(item);
// 非空校验
const checkboxRequired = (key: string) => {
return new Promise((resolve, reject) => {
if (item?.required) {
let updatedCopy = copyFormItems.map((v: any) => {
if (key === v.key) {
if (
!v.value ||
v.value.length === 0 ||
(v.value.length === 1 && v.value[0] === '')
) {
v.showError = true;
reject(v.label + '不能为空');
} else {
v.showError = false;
resolve(true);
}
setCopyItem({...v});
return {...v};
}
return v;
});
setCopyFormItems(updatedCopy);
} else {
let copy = copyFormItems.map((v: any) => {
if (key === v.key) {
v.showError = false;
setCopyItem({...v});
return {...v};
}
return v;
});
setCopyFormItems(copy);
resolve(true);
}
});
};
// 获取选择的所有值
const changeCheckbox = (key: string, val: any, isChecked: boolean) => {
const updatedCopy = copyFormItems.map((v: any, i: number) => {
if (key === v.key) {
if (v.multiple) {
v.options.map((item: any) => {
if (item.value === val) item.checked = isChecked;
});
if (isChecked) {
let arr = [...v.value, val];
v.value = Array.from(new Set(arr));
} else {
v.value = v.value.filter((item: any) => item !== val);
}
} else {
v.options.map((item: any) => {
if (item.checked) item.checked = false;
if (item.value === val) item.checked = isChecked;
});
if (isChecked) {
v.value = val;
} else {
v.value = '';
}
}
}
return v;
});
setCopyFormItems(updatedCopy);
};
// 赋值回显
const setCheckbox = (val: any) => {
const updatedCopy = copyFormItems.map((v: any, i: number) => {
if (item.key === v.key) {
v.options.map((item: any) => {
if (typeof val === 'string') val = [val];
v.value = val;
val.map((p: string) => {
if (item.value === p) {
item.checked = true;
}
});
});
}
return v;
});
setCopyFormItems(updatedCopy);
};
// 清空选择的所有值
const cleanCheckbox = (key: string) => {
const updatedCopy = copyFormItems.map((v: any, i: number) => {
if (key === v.key) {
v.options.map((item: any) => {
item.checked = false;
});
if (v.multiple) v.value = [];
else v.value = '';
}
return v;
});
setCopyFormItems(updatedCopy);
};
useImperativeHandle(ref, () => ({
cleanCheckbox,
setCheckbox,
checkboxRequired,
}));
useEffect(() => {
setFormItems(copyFormItems);
}, [copyFormItems]);
useEffect(() => {
if (!buttons || !buttons.isSubmit) getFormItemValue();
}, [formItems]);
return (
<View>
{item?.showLabel ? (
<Text>
<RequiredView required={item?.required} />
<Text style={styles.labelText}>{item.label}</Text>
</Text>
) : (
<></>
)}
<View style={styles.checkboxListView}>
{item.options.map((v: any, i: number) => {
return (
<TouchableOpacity
onPress={() => changeCheckbox(item.key, v.value, !v.checked)}
disabled={disabled}>
<View style={styles.optionItem}>
<Text
style={
v.checked
? {
...styles.checkboxListItem,
backgroundColor: '#D6EFFF',
}
: {
...styles.checkboxListItem,
backgroundColor: '#F7F5F8',
}
}>
{v.label}
</Text>
</View>
</TouchableOpacity>
);
})}
</View>
{copyItem.showError ? (
<Text style={styles.errorText}>{copyItem.label}不能为空 </Text>
) : (
<></>
)}
</View>
);
});
// 时间选择组件
const DateTimePickerItem = forwardRef((props: any, ref: any) => {
let {item, formItems, buttons, setFormItems, getFormItemValue, disabled} =
props;
const [datePickerVisible, setDatePickerVisibility] = useState(false);
const [copyFormItems, setCopyFormItems] = useState(formItems);
const [copyItem, setCopyItem] = useState(item);
// 非空校验
const dateTimeRequired = (key: string) => {
return new Promise((resolve, reject) => {
if (item?.required) {
let copy = copyFormItems.map((v: any) => {
if (key === v.key) {
if (!v.value) {
v.showError = true;
reject(v.label + '不能为空');
} else {
v.showError = false;
resolve(true);
}
setCopyItem({...v});
return {...v};
}
return v;
});
setCopyFormItems(copy);
} else {
let copy = copyFormItems.map((v: any) => {
if (key === v.key) {
v.showError = false;
setCopyItem({...v});
return {...v};
}
return v;
});
setCopyFormItems(copy);
resolve(true);
}
});
};
// 确定按钮
const handleConfirm = (val: any) => {
let date = parseTime(val);
// 如果有initTime 设置固定时间 00:00:00 23:59:59
const copy = copyFormItems.map((v: any, i: number) => {
if (v.key === item.key) {
if (item?.initTime) {
if (item.key.includes('start')) {
let start = date?.substring(0, 10) + ' 00:00:00';
item.value = start;
} else if (item.key.includes('end')) {
let end = date?.substring(0, 10) + ' 23:59:59';
item.value = end;
}
} else {
item.value = date;
}
return {...item};
}
return v;
});
setCopyFormItems(copy);
setDatePickerVisibility(false);
};
// 清空所有值
const cleanDateTime = (key: string) => {
const updatedCopy = copyFormItems.map((v: any, i: number) => {
if (key === v.key) {
v.value = '';
}
return v;
});
setCopyFormItems(updatedCopy);
};
useImperativeHandle(ref, () => ({
dateTimeRequired,
cleanDateTime,
}));
useEffect(() => {
setFormItems(copyFormItems);
}, [copyFormItems]);
useEffect(() => {
if (!buttons || !buttons.isSubmit) getFormItemValue();
}, [formItems]);
return (
<View>
{item?.showLabel ? (
<Text>
<RequiredView required={item?.required} />
<Text style={styles.labelText}>{item.label}</Text>
</Text>
) : (
<></>
)}
<TouchableOpacity
onPress={() => setDatePickerVisibility(true)}
disabled={disabled}>
<View
style={[
styles.datePickerView,
item.isSubmitForm ? styles.greyBorder : styles.blueBorder,
]}>
<View>
<Text style={styles.placeholderText}>
{item.value
? item.value
: item?.placeholder
? item?.placeholder
: item.label}
</Text>
</View>
<Calendar stroke="#7F7F8E" width={16} height={16} />
<DateTimePickerModal
isVisible={datePickerVisible}
mode="date"
onConfirm={handleConfirm}
onCancel={() => setDatePickerVisibility(false)}
/>
</View>
</TouchableOpacity>
{copyItem.showError ? (
<Text style={styles.errorText}>{copyItem.label}不能为空 </Text>
) : (
<></>
)}
</View>
);
});
const SlotItem = forwardRef((props: any, ref) => {
let {item, formItems, setFormItems, buttons, getFormItemValue} = props;
let Children = SlotComponent[item.slot];
const [copyFormItems, setCopyFormItems] = useState(formItems);
const [copyItem, setCopyItem] = useState(item);
// 非空校验
const slotRequired = (key: string) => {
return new Promise((resolve, reject) => {
if (item?.required) {
let copy = copyFormItems.map((v: any) => {
if (key === v.key) {
if (v.value && Object.keys(v.value).length > 0) {
v.showError = false;
resolve(true);
} else {
v.showError = true;
reject(v.label + '不能为空');
}
setCopyItem({...v});
return {...v};
}
return v;
});
setCopyFormItems(copy);
} else {
let copy = copyFormItems.map((v: any) => {
if (key === v.key) {
v.showError = false;
setCopyItem({...v});
return {...v};
}
return v;
});
setCopyFormItems(copy);
resolve(true);
}
});
};
// 最终选择的数据
const resultData = (e: any) => {
const copy = copyFormItems.map((v: any) => {
if (v.key === item.key) {
item.value = e;
return {...item};
}
return v;
});
setCopyFormItems(copy);
};
useImperativeHandle(ref, () => ({
slotRequired,
}));
useEffect(() => {
setFormItems(copyFormItems);
}, [copyFormItems]);
useEffect(() => {
if (!buttons || !buttons.isSubmit) getFormItemValue();
}, [formItems]);
return (
<View>
{item?.showLabel ? (
<Text>
<RequiredView required={item?.required} />
<Text style={styles.labelText}>{item.label}</Text>
</Text>
) : (
<></>
)}
<Children navigation={item?.navigation} resultData={resultData} />
{copyItem.showError ? (
<Text style={styles.errorText}>{copyItem.label}不能为空 </Text>
) : (
<></>
)}
</View>
);
});
const RequiredView = (required: any) => {
return required ? <Text style={styles.requiredColor}>*</Text> : <></>;
};
const Form = forwardRef((props: any, ref) => {
const formInputRef = useRef(null);
let copyFormItems = cloneDeep(props?.formItems || []);
let disabled = props?.disabled;
// 需要校验的表单项
let fieldsToValidate: any = [];
let formItemValue: any = {};
copyFormItems.map((v: any) => {
if (v.type === 'input') {
formItemValue[v.key] = v.value;
} else if (v.type === 'select') {
v.open = false;
if (v.multiple) {
v.value = [];
} else {
v.value = '';
}
} else if (v.type === 'checkbox') {
if (v.multiple) {
v.value = [];
} else {
v.value = '';
}
}
v?.required &&
fieldsToValidate.push({key: v.key, label: v.label, type: v.type});
});
const validationSchema = Yup.object().shape(
fieldsToValidate.reduce((schema: any, field: any) => {
if (field.type === 'input' || field.type === 'textarea') {
return {
...schema,
[field.key]: Yup.string().required(field.label + '不能为空'),
};
}
}, {}),
);
const setFormValue = (form: any) => {
if (formInputRef.current && form) {
formInputRef.current.setFormItemValue(form);
}
};
const getFormValue = (params: any = null) => {
if (formInputRef.current) {
if (params || params === 0) formInputRef.current.getFormItemValue(params);
else formInputRef.current.getFormItemValue();
}
};
useImperativeHandle(ref, () => ({
setFormValue,
getFormValue,
}));
return (
<View style={styles.form}>
<Formik
initialValues={formItemValue}
onSubmit={values => {}}
validationSchema={validationSchema}>
<FormInput
formItems={copyFormItems}
whole={props?.whole}
onForm={props?.onForm}
ref={formInputRef}
disabled={disabled}
/>
</Formik>
</View>
);
});
const styles = StyleSheet.create({
form: {
backgroundColor: '#ffffff',
zIndex: 1000,
width: '100%',
},
rowView: {
flex: 1,
},
inputView: {
margin: 2,
padding: 0,
paddingBottom: 20,
paddingLeft: 10,
},
labelText: {
fontSize: 12,
color: '#333333',
},
greyBorder: {
borderWidth: 0.8,
borderRadius: 4,
borderColor: '#CFCCCF',
},
blueBorder: {
borderWidth: 1,
borderRadius: 50,
borderColor: '#7FABE7',
},
input: {
fontSize: 12,
padding: 0,
},
inputItemView: {
...mainStyles.centerFlexRow,
justifyContent: 'flex-start',
flexWrap: 'wrap',
marginTop: 6,
},
dropDownContainerStyle: {
borderWidth: 0,
marginTop: -8,
...Platform.select({
android: {
...mainStyles.androidShadow,
},
ios: {
...mainStyles.iosShadow,
},
}),
height: 120,
},
checkboxListView: {
...mainStyles.centerFlexRow,
justifyContent: 'flex-start',
flexWrap: 'wrap',
paddingTop: 4,
},
checkboxListItem: {
fontSize: 10,
color: '#333333',
paddingTop: 3,
paddingBottom: 3,
paddingLeft: 8,
paddingRight: 8,
borderRadius: 16,
},
optionItem: {
margin: 2,
},
datePickerView: {
margin: 2,
paddingTop: 4,
paddingBottom: 4,
paddingLeft: 10,
paddingRight: 10,
...mainStyles.centerFlexRow,
justifyContent: 'space-between',
},
placeholderText: {
fontSize: 12,
color: '#7F7F8E',
},
buttonView: {
...mainStyles.centerFlexRow,
marginTop: 10,
marginBottom: 10,
},
errorText: {
color: '#FF190C',
fontSize: 12,
marginLeft: 7,
},
requiredColor: {
color: '#FF190C',
},
});
export default Form;SlotComponent.tsx
新加的自定义表单项都需要统一在这里引入。
import { SelectPeople } from '@/screens/MDT/FirstVisit/component/SelectPeople/Index';
export default {
SelectPeople
};
开源鸿蒙跨平台开发社区汇聚开发者与厂商，共建“一次开发，多端部署”的开源生态，致力于降低跨端开发门槛，推动万物智联创新。
更多推荐
3
0- 0
已为社区贡献1条内容
所有评论(0)