Шаблон формы Formik для создания XML-документов - PullRequest
Новая
       10

Шаблон формы Formik для создания XML-документов

0 голосов
/ 21 сентября 2019

Я создаю форму реакции с библиотекой Formik.Моя цель - создать XML-документ с вводом формы.Мой подход заключается в том, что если бы я мог создать хорошо структурированный объект JS с помощью Formik, то я мог бы написать функцию для записи этих полей формы в схему xml.

Теперь я знаю, что с <FieldArray /> компонентом Formik я могу создавать вложенные объекты, и это может помочь мне позже обработать родительские и дочерние элементы создания файла XML, но мне действительно нужна помощьо том, как я могу иметь дело с атрибутами XML внутри объекта.Атрибуты также являются частью формы.Пользователь должен иметь возможность вводить их как обычные поля формы.Я отчаянно ищу решение.Ниже я представил схему для желаемого XML-документа и желаемого поля формы.enter image description here

  <creators>
   <creator>
     <creatorName nameType="Personal">Miller, Elizabeth</creatorName>
     <givenName>Elizabeth</givenName>
     <familyName>Miller</familyName>
     <nameIdentifier schemeURI="organi.org/" nameIdentifierScheme="ORC">7</nameIdentifier>
     <affiliation>DataCite</affiliation>
   </creator>
  </creators>

Может ли кто-нибудь дать мне пример того, как создать компонент <FieldArray />, который может быть полезен для создания приведенного выше схематического XML-документа?

Обновление: большое спасибо @ rutherford-wonkington за ваш ответ.

Я вижу, вы пытаетесь решить мою проблему с атрибутами, добавив ключ 'value' к объекту JS.Это было именно то, что я искал.По вашему предложению, с небольшой модификацией, я создал компонент ниже.Как вы думаете, этот компонент закроет сделку?Тогда я мог бы отредактировать этот пост и принять ваш ответ.

<code>import { FieldArray, Form, Field,Formik } from "formik";
import { Button } from "@material-ui/core";




export const Creators = () => (
    <div>
        <h1>Creators</h1>
        <Formik
            initialValues={{
                creator: [
            {creatorName: {value: "Elisabeth, Miller", nameType: "Personal"}}, {givenName: 'Elisabeth'},
            {familyName: "Miller"},
            {nameIdentifier: {value:'7', schemeURI: "organi.org/", nameIdentifierScheme:"ORC"}},
            {affiliation: "Cook"}
            ]}}
            render={({ values }) => (
                <Form>
                    <FieldArray
                        name="creator"
                        render={arrayHelpers => (
                            <div>
                                {values.creator.map((creator, index) => (
                                    <div>
                                        <Field name={`creator.${index}.creatorName.value`} />
                                        <Field name={`creator.${index}.creatorName.nameType`} />
                                        <Field name={`creator.${index}.givenName`} />
                                        <Field name={`creator.${index}.familyName`} />
                                        <Field name={`creator.${index}.nameIdentifier.value`} />
                                        <Field name={`creator.${index}.nameIdentifier.schemeURI`} />
                                        <Field name={`creator.${index}.nameIdentifier.nameIdentifierScheme`} />
                                        <Field name={`creator.${index}.affiliation`} />

                                        <Button type="button" onClick={() => arrayHelpers.remove(index)}>
                                            -
                                        </Button>
                                    </div>
                                ))}
                                <Button color="primary"
                                        type="button"
                                        onClick={() => arrayHelpers.push({})}
                                >
                                    Add New
                                </Button>
                            </div>
                        )}
                    />
                    <pre>{JSON.stringify(values, null,2 )}
)} /> );

1 Ответ

1 голос
/ 22 сентября 2019

Вы можете структурировать свои данные следующим образом: 

const initialValues = {
  creators: [
    {
      creatorName: {
        value: "Miller, Elizabeth",
        nameType: "Personal"
      },
      givenName: "Elizabeth",
      familyName: "Miller",
      nameIdentifier: {
        value: "7",
        schemeURI: "organi.org/",
        nameIdentifierScheme: "ORC"
      },
      affiliation: "DataCite"
    }
  ]
};

Не должно быть слишком сложно увидеть, как вы можете связать каждое значение и параметр с его собственным конкретным значением, используя точечную запись в поле имени.Вы можете использовать FieldArray для отображения массива создателей и генерировать набор Fields для каждого значения и параметра, как в этом примере из документов Formik: 

<Form>
  <FieldArray
    name="friends"
    render={arrayHelpers => (
      <div>
        {values.friends.map((friend, index) => (
          <div key={index}>
            <Field name={`friends[${index}].name`} />
            <Field name={`friends.${index}.age`} /> // both these conventions do the same
            <button type="button" onClick={() => arrayHelpers.remove(index)}>
              -
            </button>
          </div>
        ))}
        <button
          type="button"
          onClick={() => arrayHelpers.push({ name: '', age: '' })}
        >
          +
        </button>
      </div>
    )}
  />
</Form>

Когда вы анализируете вашОбъект в XML, просто используйте value для значения и примените другие поля в качестве свойств.

...