В настоящее время я работаю над формой обновления (запрос на размещение) на ReactJS. У меня есть данные формы, хранящиеся как this.state, которые я хочу использовать для предварительного заполнения, однако я не уверен, как внедрить их в поле dynamici c, так как я хотел бы, чтобы предварительно заполненные данные все еще удерживались на ' удалить функцию, чтобы удалить эту строку полей из формы. Кроме того, я хотел бы, чтобы строки отображались автоматически при отображении формы. Это означает, что если есть две строки в поле Dynami c, эти две строки должны отображаться без нажатия кнопки «Добавить». Ниже приведен фрагмент кода и снимок экрана формы.
<Form.List name={addon.model} key={addon.model}>
{(fields, { add, remove }) => {
return (
<div>
{fields.map((field, index) => (
<Row key={field.key}>
{addon.fields.map((a) => (
<Col key={'c' + a.key}>
<Input placeholder={a.label} name={a.key} key={'i' + a.key}
onChange={(e) => this.onChangeAddOn(e, index, addon.model)} />
</Col>
))}
<Col flex="none">
<MinusCircleOutlined
className="dynamic-delete-button"
onClick={() => {
remove(field.name);
}}
/>
</Col>
</Row>
))
}
<Button
type="dashed"
onClick={() => {
add();
}}
style={{ width: "100%" }}
>
<PlusOutlined /> Add POCs
</Button>
</div>
);
}}
</Form.List>
снимок экрана (кнопка «-» - это кнопка удаления, и я могу добавить дополнительные поля, если я нажму «Добавить PO»). C ', но главное в том, что две строки данных должны отображаться в начале вместе с формой => данные, хранящиеся в этом состоянии)
Вся помощь приветствуется и приветствуется, пожалуйста, помогите указать мне правильное направление, поскольку я все еще новичок в ReactJS! Я взглянул на реквизит рендера и Form.List, но пока не уверен, как это реализовать.