这个功能解决了什么问题？
1、表单里有相同的多个控件为最小单元，支持增删改
2、表单field受控，互相依赖，需要监听表单值
你期望的组件设计是怎样的？
interface ListField {
name: string; // 这个返回的是 Form.List 的 name 加索引，如 group_0
key: number;
isListField: boolean; // 这个必须要传给 Form.Item
}
interface ListOperations {
add: (defaultValue?: Value, index?: number) => void;
remove: (index: number) => void;
move: (from: number, to: number) => void;
}
<Form.List name="enterWorkApplyJobDTOList">
{(fields, { add, remove }) => {
return (
<View>
{fields.map((field, index) => {
const _index = index + 1;
return (
<View className={styles.field} key={_index.toString()}>
<ReduceFilled
className={classnames([styles.field__delete], {
[styles.field__delete__disabled]: fields.length < 2,
})}
onClick={() => {
fields.length > 1 && remove(index);
}}
/>
<FormItem
{...field}
name={[field.name, 'jobId']}
label=" "
labelWidth={0}
className={styles.job}
rules={[{ required: true, message: '请选择' }]}
>
<FormPicker
mode="selector"
icon="DownOutlined"
range={
jobData?.map((item) => ({
label: item.name,
value: item.id,
})) ?? []
}
rangeKey="label"
placeholder="选择岗位"
/>
</FormItem>
<FormItem
{...field}
name={[field.name, 'amount']}
label=" "
labelWidth={0}
className={styles.count}
rules={[{ required: true, message: '请输入' }]}
>
<Input
placeholder="请输入"
type="number"
suffix="人"
allowClear={false}
/>
</FormItem>
</View>
);
})}
<View
className={styles.btn}
onClick={() => {
add({ jobId: undefined, amount: undefined });
}}
>
<NewFilled className={styles['btn-icon']} />
添加岗位
</View>
</View>
);
}}
</Form.List>
这个功能解决了什么问题？
1、表单里有相同的多个控件为最小单元，支持增删改
2、表单field受控，互相依赖，需要监听表单值
你期望的组件设计是怎样的？
interface ListField {
name: string; // 这个返回的是 Form.List 的 name 加索引，如 group_0
key: number;
isListField: boolean; // 这个必须要传给 Form.Item
}
interface ListOperations {
add: (defaultValue?: Value, index?: number) => void;
remove: (index: number) => void;
move: (from: number, to: number) => void;
}