时间戳

首页 > 解决方案 > 如何使用 react-final-form 添加或删除表单键

javascript - 如何使用 react-final-form 添加或删除表单键

问题描述

单个配置示例显示了我用于输入的配置。

    export const age = [
      {
        value: '',
        type: 'radio',
        name: 'age',
        items: [
          {value: 'kid', label: 'Im less than 18',
          {value: 'adult', label: 'Im 18!',
        ],
      },
    ];

export const someDate = [
  {
    type: 'date',
    value: null,
    name: 'someDate',
    label: 'Enter date',
    format: 'dd/MM/yyyy',
    minDate: new Date('2019-12-31'),
    maxDate: new Date('2020-03-31'),
    validators: required.required.date
  }
];

RFForm 是 rect-final-form Form 组件的包装器，我将内部的所有组件作为子组件传递。

<RFForm
      config={[...age, ...someDate, ...somethingElse]}
      submit={submit}
    >
      <SectionBox title="Your age">
        <Box mb={5}>
          <InputList inputs={age}/>
        </Box>
        <SectionTitle title="Date"/>
        <Box maxWidth="50%">
          <InputList inputs={someDate}/>
        </Box>
      </SectionBox>

      <SectionBox title="Something else">
        <Box maxWidth="50%">
          <InputList inputs={somethingElse}/>
        </Box>
      </SectionBox>


     {
        conditionToHideOrShowSection && <SectionWithInputs />
     }

      {
        buttons
      }

    </RFForm>

我想添加一个新部分，该部分将隐藏或显示取决于用户选择的内容。该部分应仅在选择第二个单选按钮值时出现（成人）。该部分将包含一个带有来自配置的输入的组件。所有字段都应该是必需的。这仅应在该部分存在时进行验证。

  1. 第一个问题 - 我应该如何检查特定的单选按钮是否被选中。我无权从这里访问 useForm，我需要隐藏或显示部分。
  2. 第二个问题 - 如何在其他输入发生变化时动态添加新输入。请记住，我必须将其添加到配置（RFForm 道具），因为必须更新初始值。

标签： javascriptreactjsformsvalidationreact-final-form

解决方案

  1. 实际上你可以访问它，但是通过render方法链接以其他方式

  2. 此示例显示如何有条件地显示输入链接。请注意，如果输入隐藏数据不会消失，它仍然存在，所以要清理你应该使用change('inputName', undefined)（至少在我的情况下它对我有帮助）

  3. 最后，您还应该检查有关subscription道具。关联

推荐阅读