Как сериализовать форму, имя которой отличается от структуры данных - PullRequest
Новая
       188

Как сериализовать форму, имя которой отличается от структуры данных

0 голосов
/ 07 августа 2020

Как я могу сериализовать форму, структура данных которой отличается от ее имени.

Например, у меня есть следующая форма, которая получает numberofItems из объекта inventory и отображается в TextArea. 

<Form
    enableReinitialize={true}
    initialValues={{
        numberofItems: inventories.numberofItems
    }}
    onSubmit={handleSubmit}
>
<FormItem
    name={'numberofItems'}
    label={'Current Stock'}
    maxLength={32000}
>
    {inputProps => <TextArea {...inputProps} />}
</FormItem>
</Form>

Это отлично работает при рендеринге формы. Но когда я пытаюсь опубликовать форму, ожидаемое свойство имеет значение null. Потому что служба ожидает inventories.numberofItems там, где я отправляю numberofItems, в соответствии с его именем.

Я могу избежать этого, передав объект в форму и извлекая каждое поле для управления. 

<Form
    enableReinitialize={true}
    initialValues={{
        inventories: inventories
    }}
    onSubmit={handleSubmit}
>
<FormItem
    name={'inventories.numberofItems'}
    label={'Current Stock'}
    maxLength={32000}
>
    {inputProps => <TextArea {...inputProps} />}
</FormItem>
</Form>

Но есть ли способ сериализовать элемент управления с ключом, отличным от его имени.

В моем случае я хочу сериализовать форму с помощью inventories.numberofItems, сохраняя имя управление как numberofItems. 

<FormItem
    name={'numberofItems'}
    label={'Current Stock'}
    maxLength={32000}
>
    {inputProps => <TextArea {...inputProps} />}
</FormItem>

1 Ответ

0 голосов
/ 07 августа 2020

Что вы можете сделать, чтобы успешно отправить форму (хотя я не знаю, соответствует ли она вашим потребностям, это то, что я делаю в аналогичных случаях в моем коде, где у меня есть бэкэнд JAX-RS, который не может отображаться на неизвестное properties of object) устанавливается обязательное свойство и удаляет то, которое не может быть отправлено. 

function handleSubmit(myFormObject) {
  myFormObject.inventories = {numberofItems: myFormObject.numberofItems}
  delete myFormObject.numberofItems
  .
  .
  .
}

redux-form поддерживает такие случаи. Вы можете определить Field со свойством name как «составное», и оно будет правильно отображаться на отправляемый объект формы.

Отметьте этот образец кодов и ящик 

      <Field name="test.notes" component="textarea" />
...