以嵌套动态形式设置 initalValues |蚂蚁

Question

我创建了下面的沙箱，希望有人能帮助我。

https://codesandbox.io/s/suspicious-leaf-cijswt?file=/src/App.js

我需要做的基本上是将成分数组加载为 Form.List 的初始值。

这可能吗？如果是，如何？

非常感谢任何帮助。

谢谢！

Answer 1

在Form中使用initialValues属性来初始化字段。由于您将 FormList 命名为 users。您可以像这样设置值：

initialValues={{ users: ingredients }}

现在你的字段看起来像这样：

<Form.Item
    {...restField}
    name={[name, "first"]}
    rules={[{ required: true, message: "Missing first name" }]}
    >
        <Input placeholder="First Name" />
</Form.Item>

最重要的是name属性name={[name, "first"]}。在成分数组中，每个对象都有以下键：key, id, & amount。假设您想在每个输入中显示 id & amount。您使用 [name, "id"] 指定字段路径。其中 name 表示数组的索引 & id 是数组中对象的键。 Antd 将自动获取该数组中可用的值。

我只是做了一些改动，比如正确的命名键，...根据数据

完整代码

import { Form, Input, Button, Space, InputNumber } from 'antd';
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';

const ingredients = [
    {
        key: 0,
        name: 'Wheat Flour',
        amount: 1000
    },
    {
        key: 1,
        name: 'Sugar',
        amount: 800
    }
];

export default function App() {
    return (
        <Space style={{ display: 'flex', margin: 36 }} align='baseline'>
            <Form
                name='dynamic_form_nest_item'
                onFinish={console.log}
                autoComplete='off'
                initialValues={{ ingredients: ingredients }}
            >
                <Form.List name='ingredients'>
                    {(fields, { add, remove }) => (
                        <>
                            {fields.map(({ key, name, ...restField }) => (
                                <Space key={key} style={{ display: 'flex', marginBottom: 8 }} align='baseline'>
                                    <Form.Item
                                        {...restField}
                                        name={[name, 'name']}
                                        rules={[{ required: true, message: 'Missing ingredient' }]}
                                    >
                                        <Input placeholder='Ingredient' />
                                    </Form.Item>
                                    <Form.Item
                                        {...restField}
                                        name={[name, 'amount']}
                                        rules={[{ required: true, message: 'Missing Amount' }]}
                                    >
                                        <InputNumber placeholder='Amount' />
                                    </Form.Item>
                                    <MinusCircleOutlined onClick={() => remove(name)} />
                                </Space>
                            ))}
                            <Form.Item>
                                <Button type='dashed' onClick={() => add()} block icon={<PlusOutlined />}>
                                    Add field
                                </Button>
                            </Form.Item>
                        </>
                    )}
                </Form.List>
                <Form.Item>
                    <Button type='primary' htmlType='submit'>
                        Submit
                    </Button>
                </Form.Item>
            </Form>
        </Space>
    );
}

以嵌套动态形式设置 initalValues |蚂蚁

set initalValues in nested dynamic form | Antd

reactjs

antd