2

我如何添加自己的字段以将其填充到表单列表中

<Form.List
          name="products"
        >
          {(data, { add, remove }) => {
            console.log(data);
            return (
              <>
                {data.map((product) => (
                  <>
                    <Col span={3} offset={2}>
                      <Form.Item
                        name={['referralNumber']}
                        rules={[{ required: true, message: 'Missing first name' }]}
                      >
                        <Input />
                      </Form.Item>
                    </Col>
                    <Col span={1} offset={1}>
                      <DeleteOutlined onClick={() => remove(product.id)} />
                    </Col>
                    <Divider />
                  </>
                ))}
                <Col span={24}>
                  <Form.Item>
                    <Button type="dashed" onClick={add} block icon={<PlusOutlined />}>
                      افزودن کالا
                    </Button>
                  </Form.Item>
                </Col>
              </>
            );
          }}
        </Form.List>

我想访问像这个界面这样的文件

export interface CreateReceiptItemDto {
  receiptId: number;
  productId: number;
  initialMainQuantity: number;
  initialSubQuantity: number;
  referralNumber: string;
}

但我总是得到这样的东西，它在 node_modules 中的定义是这样的

import * as React from 'react';
import { ValidatorRule, StoreValue } from 'rc-field-form/lib/interface';
export interface FormListFieldData {
    test: number;
    test2: number;
    fieldKey: number;
}
export interface FormListOperation {
    add: (defaultValue?: StoreValue, insertIndex?: number) => void;
    remove: (index: number | number[]) => void;
    move: (from: number, to: number) => void;
}
export interface FormListProps {
    prefixCls?: string;
    name: string | number | (string | number)[];
    rules?: ValidatorRule[];
    initialValue?: any[];
    children: (fields: FormListFieldData[], operation: FormListOperation, meta: {
        errors: React.ReactNode[];
    }) => React.ReactNode;
    }
    declare const FormList: React.FC<FormListProps>;
    export default FormList;

我想我需要一些东西来覆盖这个定义或类似的东西来定制它

4

2 回答 2

0

我喜欢这种方式通过我自己的模型创建一个对象数组，方法是用我的名字迭代一个表单，然后在那个表单中提交名称并提交我得到我的模型作为一个数组

  <Form.List
          name="products"
          initialValue={[{ id: 1, name: 'test', mainUnit: '2213', subUnit: '21312' }]}
        >
          {(data, { add, remove }) => {
            console.log(data);
            return (
              <>
                {data.map((product) => (
                  <>
                    <Form name="test">
                      <Col span={2}>
                        <Form.Item
                          name={['id']}
                          rules={[{ required: true, message: 'Missing first name' }]}
                        >
                          <Input />
                        </Form.Item>
                      </Col>
                      <Col span={5} offset={2}>
                        <Form.Item
                          name={'name'}
                          rules={[{ required: true, message: 'Missing first name' }]}
                        >
                          <Input />
                        </Form.Item>
                      </Col>
                      <Col span={2} offset={2}>
                        <Form.Item
                          name={'mainUnit'}
                          fieldKey={'mainUnit'}
                          rules={[{ required: true, message: 'Missing first name' }]}
                        >
                          <Input />
                        </Form.Item>
                      </Col>
                      <Col span={2} offset={2}>
                        <Form.Item
                          name={'subUnit'}
                          rules={[{ required: true, message: 'Missing first name' }]}
                        >
                          <Input />
                        </Form.Item>
                      </Col>
                      <Col span={3} offset={2}>
                        <Form.Item
                          name={['referralNumber']}
                          rules={[{ required: true, message: 'Missing first name' }]}
                        >
                          <Input />
                        </Form.Item>
                      </Col>
                      <Col span={1} offset={1}>
                        <DeleteOutlined onClick={() => remove(product.id)} />
                      </Col>
                      <Divider />
                    </Form>
                  </>
                ))}
                <Col span={24}>
                  <Form.Item>
                    <Button type="dashed" onClick={add} block icon={<PlusOutlined />}>
                      افزودن کالا
                    </Button>
                  </Form.Item>
                </Col>
              </>
            );
          }}
        </Form.List>
于 2021-02-01T12:54:44.587 回答
0

您可以使用 initialValue 道具设置值。

InitialValue道具将设置您的字段 defaultValue。

可以在下面的代码示例中设置多个值：

<Form.List
          name="products"
          initialValue={[{ id: 5, name: 'example', mainUnit: '77', subUnit: '777' }]}
        >

可以在下面的代码示例中设置单个值：

<Form.Item
                          name={['id']}
initialValue="5"
                          rules={[{ required: true, message: 'Missing first name' }]}
                        >

您可以尝试使用单个或多个偏好值。

于 2021-03-01T14:21:44.333 回答