Начальное значение «поля» Form.List

Question

Извините за мой английский sh.

Как в этом примере

https://codesandbox.io/s/wonderful-lichterman-br63z?file= / index. js

Form.List представляет массив «полей», который изначально пусто.

Я хотел бы поместить свой собственный массив для визуализации с самого начала.

Ожидаемый результат

Answer 1

вы можете сделать это, используя initialValues реквизит формы.

Рабочий пример: https://codesandbox.io/s/bold-turing-g8ft6?file= / index. js Документы: https://ant.design/components/form/#API

Answer 2

Документы немного коротки для объяснения Form.List, и поскольку пример кода стоит тысячи слов ...

Это дает динамическую форму c список с одним видимым элементом:

const initialValues = {
  users: [
    { age: undefined } // undefined will render the placeholder
  ] 
};

<Form initialValues={initialValues}>
  <Form.List name="users">
    {(fields, { add }) => {
      return (
        <div>
          {fields.map(field => (
            <Row key={field.key}>
              <Col>
                <Form.Item
                  placeholder="age"
                  name={[field.age, 'age']}
                >
                  <Input />
                </Form.Item>
              </Col>
              <Col>
                <Form.Item
                  placeholder="sex"
                  name={[field.sex, 'sex']}
                >
                  <Input />
                </Form.Item>
              </Col>
              <Col>
                <Form.Item
                  placeholder="name"
                  name={[field.name, 'name']}
                >
                  <Input />
                </Form.Item>
              </Col>
            </Row>
          ))}
          <button onClick={() => add()}>Add</button>
        </div> 
      )
    }}
  </Form.List>
</Form>