formily 自定义 ArrayCollapse.Addition 同时实现添加 功能

在Formily中，如果你想要自定义ArrayCollapse组件同时实现数组的添加功能，你需要结合`FieldArray`和自定义的增删操作组件。以下是大致步骤：

1. **创建自定义组件**：首先，你可以创建一个自定义的`AddButton`组件，用于显示添加按钮并处理添加操作。这个组件通常包含一个`onClick`回调，当点击时触发数组的`push`方法，增加新的数组元素。

import { Formik, FieldArray } from 'formik';

const AddButton = ({ array, label, addCallback }) => (
   <button onClick={() => addCallback(array)}>{label}</button>
);

2. **使用FieldArray**：在Form组件中，使用`FieldArray`包装数组字段，并将`AddButton`组件作为数组项的一部分。

<FieldArray name="items" helperText="点击添加新元素">
   {({ push, remove }) => (
      <div>
         {fields.map((item, index) => (
            <div key={index}>
               {/* 显示已有元素 */}
               {/* ... */}
               {/* 添加按钮 */}
               <AddButton array={array} label="添加" addCallback={push} />
            </div>
         ))}
         {/* 如果需要，可以提供一个单独的添加框 */}
         <AddButton array={array} label="添加更多" addCallback={push} />
      </div>
   )}
</FieldArray>

3. **处理添加操作**：在`AddButton`组件的`addCallback`里，调用`push`方法并将新元素的初始值（通常是默认值或空对象）传入。

<AddButton array={array} label="添加" addCallback={(index) => array.push({ id: Date.now(), value: '' })} />

4. **保持状态同步**：提交表单时，记得将修改后的数组值同步回Formik状态。

const handleSubmit = (values) => {
   onSubmit(values);
};