在另一个字段中调用 form.change(fieldName, value) 不会改变 fieldName 字段

Question

我正在尝试将 Form 组件与 subscription={{ submitting: true, pristine: true }} 一起使用，因此它不会在每次更改时重新呈现整个表单。我有一个字段可以更改表单中另一个字段的值。我希望 Field 组件订阅对其名称值的更改。在这种情况下，它不会改变，我需要用 FormSpy 包装该字段。这不是最好的解决方案，因为 FormSpy 无法订阅单个值，并且在 values.

的每次更改时重新呈现其子项

这是有效的代码，但它不需要 FormSpy:

export const CountryForm = ({ regions, countries }) => (
  <Form
    onSubmit={submittedData => {
      console.log({ submittedData })
    }}
    subscription={{ submitting: true, pristine: true }}
    render={({ handleSubmit, form }) => (
      <form onSubmit={handleSubmit}>
        <FormLabel>Regions</FormLabel>
        <FormField
          name="region"
          render={({ input, ...props }) => (
            <Select
              options={regions}
              input={{
                ...input,
                onChange: (selectedRegion: string) => {
                  input.onChange(selectedRegion)

                  const formState = form.getState()
                  const selectedCountries: string[] = formState.values.countries || []
                  const countriesFiltered = filter(countries, {
                    region: selectedRegion,
                  })

                  forEach(countriesFiltered, country => {
                    if (selectedCountries.indexOf(country.code) === -1)
                      selectedCountries.push(country.code)
                  })

                  form.change('countries', selectedCountries)
                },
              }}
              {...props}
            />
          )}
        />
        <FormLabel>Countries</FormLabel>
        <FormSpy subscription={{ values: true }}>
          {() => (
            <Field
              name="countries"
              render={props => <Select options={countries} {...props} />}
            />
          )}
        </FormSpy>
      </form>
    )}
  />
)

没有 FormSpy 组件，它不会在 region 字段更改时刷新 countries 字段。

我的问题是，我不知道这是在 Form 中使用 subscription 属性时出现的错误，还是我错误地使用了 form.onChange 函数。

Answer 1

绝对是我的代码错误，Field 组件订阅了其自身名称的更改

在另一个字段中调用 form.change(fieldName, value) 不会改变 fieldName 字段

Calling form.change(fieldName, value) in another field does not change fieldName Field

forms

reactjs

react-final-form