Question

我有一个使用蚂蚁设计步骤组件实现的多步骤表单。在其中一个步骤中，我实现了动态输入字段添加，在其中单击“加号”以添加新字段。完成后，我跳到下一步，回到步骤，只有一个字段存在，当我再次单击“加号”以像以前一样添加字段时，它会添加字段，但是它们已经输入了先前的数据

如何坚持下去，如果我离开该步骤然后返回，我离开的字段数与返回时遇到的字段数相同？

const { field, dynamicFields } = inputs; //coming from props

const [blankField, setBlankField] = useState([dynamicFields]);

const addField = () => {
  setBlankField([...blankField, [...dynamicFields]]);
};

{
  blankField.map((items, legId) => (
    <>
      {legId !== 0 ? (
        <Divider orientation="left">{`${LEG}${legId}`}</Divider>
      ) : (
        false
      )}
      {items.map(item => {
        const { placeholder, key, label, inputType, rules, options } = item;
        const totalOptions = { preserve: true, rules, ...options };

        return (
          <Form.Item {...DYNAMIC_FORM_ITEM_LAYOUT} key={legId} label={label}>
            {getFieldDecorator(
              `${field}[${legId}].${key}`,
              totalOptions
            )(
              <Select
                allowClear
                showSearch
                onSearch={onSearch}
                placeholder={intl.formatMessage(placeholder)}
                loading={isLoading}
              >
                {predictions
                  ? predictions.map(({ description, id }) => (
                      <Option key={id} value={description}>
                        {description}
                      </Option>
                    ))
                  : false}
              </Select>
            )}
          </Form.Item>
        );
      })}
    </>
  ));
}

我想补充一点，当步骤完成并提交时，所有字段中的所有值都会适当保存。我只需要做的就是将字段保持不变并保留它们的值，这样当我进行下一步并返回时，我会以离开它的方式看到它。

视频链接可帮助您了解我的问题-video

蚂蚁设计步骤组件中的持久动态表单字段

0 个答案: