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

Question

single config example shows what configuration I use for inputs.

    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 is a wrapper for rect-final-form Form component and I pass all components inside as children.

<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>

I want to add a new section that will hide or show depends on what the user picks. The section should be ONLY present when the second radio button value is selected (adult). The section will contain a component with inputs from the configuration. All the fields should be required. This should only be validated when the section is present.

1. First question - how should I check if the specific radio button is checked. I don't have access to useForm from here and I need to hide or show section.
2. Second question - how to dynamically add new inputs when other inputs are changing. Remember that I have to add it to config (RFForm props) because initial value must be updated.

Answer 1

1. Actually you have access to it, but in other way via render method link

2. This sample shows how to conditionally show inputs link . Be aware if input hide back the data won't gone, it's still there , so to cleanup you should use change('inputName', undefined) (at least it helps me in my case)

3. At last you also should checkout about subscription prop. link