Question

用例

周围会有“ 第1轮”，“ 第2轮”，“ 第3轮”和“ 第4轮” ”。每个回合都有一个场例如price和date。用户可以选择最后一轮。如果用户使用价格和日期值将最后一轮选择为“第三轮”，则用户应该看到以下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}
/>

显示根据上一轮用户填写的表单字段数

0 个答案: