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

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

0 голосов
/ 25 июня 2019

Usecase

Будет около ' Round 1 ', ' Round 2 ', ' Round 3 ' и ' Раунд 4 '.Каждый раунд имеет поле, подобное price и date.Пользователю будет предоставлен выбор для выбора последнего раунда.Если пользователь выбирает последний раунд как «Раунд 3» со значением цены и даты, то пользователь должен увидеть 3 поля формы, как показано ниже 

Round 1: Price ________ Date ____________

Round 2: Price ________ Date ____________

Round 3: Price 10000 Date 06/25/2019

Предположим, если пользователь выбирает «Раунд 4» с ценой изначение даты, то пользователь видит следующее 

Round 1: Price ________ Date ____________

Round 2: Price ________ Date ____________

Round 3: Price ________ Date ____________

Round 4: Price 4000 Date 06/25/2019

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

Как это можно сделать при использовании fieldarray? 

// this is when the user has not filled last round data so there's an add button to add up to 'Round 4'

    const renderRounds = ({ fields, meta: { error, submitFailed } }) => {
      return (
        <>
          {submitFailed && error && <span>{error}</span>}
          {fields.map((round, index) => (
            <React.Fragment key={index}>
              <Row key={index}>
                <Field
                  name={`${round}.price`}
                  label="Price"
                  component={TextField}
                />
                <Field
                  name={`${round}.date`}
                  label="Date"
                  component={TextField}
                />
                <Text
                  style={{ cursor: 'pointer' }}
                  onClick={() => fields.remove(index)}
                >
                  - Delete
                </Text>
              </Row>
            </React.Fragment>
          ))}
          <div style={{ display: 'flex', justifyContent: 'space-between' }}>
            {fields.length < rounds.length && (
              <Text style={{ cursor: 'pointer' }} onClick={() => fields.push({})}>
                + Add
              </Text>
            )}
          </div>
        </>
      )
    }

<FieldArray
  name="rounds"
  component={renderFundingRounds}
/>
...