ReactJS - Предварительное заполнение поля Dynami c в форме обновления - PullRequest
0 голосов
/ 22 апреля 2020

В настоящее время я работаю над формой обновления (запрос на размещение) на 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 ', но главное в том, что две строки данных должны отображаться в начале вместе с формой => данные, хранящиеся в этом состоянии) enter image description here

Вся помощь приветствуется и приветствуется, пожалуйста, помогите указать мне правильное направление, поскольку я все еще новичок в ReactJS! Я взглянул на реквизит рендера и Form.List, но пока не уверен, как это реализовать.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...