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

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

0 голосов
/ 08 января 2020

Я пытаюсь разработать продвинутую форму, которая является динамической c. Вариант использования: пользователю будет предложено добавить маршрут, где его сначала спросят «Сколько дней». Если, например, пользователь ввел значение 4, то должны быть показаны 4 формы для заполнения дня (который будет автоматически заполнен на основе индекса, такого как день1, день2, день3, день4), источника и назначения. Теперь, опять же, если пользователь хочет получить другие дни, он должен сгенерировать форму для заполнения этих источников, получателя и т. Д. c на основе количества дней, которые выбрал пользователь.

Я видел пример из redux-form документов о FieldArray концепции, так как я уже использую redux-form для всех задач, связанных с формой, поэтому я попробовал ее, но не смог сгенерировать форму на основе количества дней, которые пользователь дал

Вот что я пробовал 

import React from "react";
import styled from "styled-components";
import { Field, FieldArray, reduxForm } from "redux-form";

const Row = ({ children, css, ...props }) => {
  return (
    <Div {...props} css={css}>
      {children}
    </Div>
  );
};

const TextField = ({ input, label, ...rest }) => {
  return (
    <>
      <input {...input} {...rest} />
    </>
  );
};

const ItineraryForm = ({ fields }) => {
  return (
    <>
      <Heading>Fill up itinerary</Heading>
      {fields.map((itinerary, index) => {
        return (
          <React.Fragment key={index}>
            <Row key={index}>
              <Field
                component={TextField}
                placeholder="Day"
                name={`${itinerary}.day`}
              />
              <Field
                component={TextField}
                placeholder="Source"
                name={`${itinerary}.source`}
              />
              <Field
                component={TextField}
                placeholder="Source"
                name={`${itinerary}.destination`}
              />
            </Row>
          </React.Fragment>
        );
      })}
    </>
  );
};

const Itinerary = ({ fields }) => {
  return (
    <>
      <Heading>
        Itinerary
        <span
          style={{
            color: "#1ab394",
            padding: "0 10px",
            cursor: "pointer"
          }}
          onClick={() => fields.push({})}
        >
          +
        </span>
      </Heading>
      {fields.map((day, index) => {
        console.log("field", day);
        return (
          <React.Fragment key={index}>
            <Row key={index}>
              <Text>
                How many
                <DaysField
                  component={TextField}
                  placeholder="days"
                  name={`${day}`}
                  onChange={() => fields.push({})}
                />
                of itinerary?
              </Text>
              <button onClick={() => fields.remove(index)}>Delete</button>
            </Row>
            <FieldArray name={`${day}.itinerary`} component={ItineraryForm} />
          </React.Fragment>
        );
      })}
    </>
  );
};

const Form = ({ handleSubmit }) => {
  return (
    <>
      <form onSubmit={handleSubmit(val => console.log("val", val))}>
        <FieldArray name="itineraries" component={Itinerary} />
        <button type="submit">Submit</button>
      </form>
    </>
  );
};

export default reduxForm({
  form: "itinerary_form"
})(Form);

const Heading = styled.p`
    color: #444;
    font-weight: bold;
    font-size: 1.35em;
  `,
  Text = styled.span`
    display: flex;
    align-items: center;
  `,
  DaysField = styled(Field)`
    margin: 0 10px;
  `,
  Div = styled.div`
    display: flex;
    margin: 0 10px 15px;
    > :not(:first-child) {
      margin-left: 15px;
    }
    ${({ css }) => css}
  `;

У меня есть демонстрационная программа для кодов и ящиков (https://codesandbox.io/s/recursing-bohr-wr9rg)

...