react-final-form - 访问 react-final-form 组件上同级字段的值

Question

我在 react-final-form 表单上有两个选择字段。选择字段有一个“选项”列表以显示在下拉列表中。我想做的是确保第二个下拉列表中可用的选项被第一个下拉列表中选择的项目“减少”。

因此，这需要第二个下拉菜单知道在第一个下拉菜单中选择了什么值。这是我想要实现的概念:

const fruitOptions = ['apple', 'orange', 'banana', 'grapes'];
<Field
  name = "morningTea"
  component = {SelectField}
  label = "Fruit for Morning Tea"
  options = {fruitOptions}
/>
<Field
  name = "afternoonTea"
  component = {SelectField}
  label = "Fruit for Afternoon Tea"
  options = {_.without(fruitOptions, morningTea)}
/>

但我看不到访问表单上其他字段值的方法。鉴于“fruitOptions”列表不是它自己的字段。

Answer 1

好吧，这在我看来像是一个文档问题 - 我会提出一张票。

基本上文档只是缺少 FormRenderProps type 也有一个 'values' 属性。从这里，在被 react-final-form 修饰的组件中，您可以访问 props.values，并从那里将值向下传递给其他组件/字段。

例如

<Form
    render={formRenderProps => {
        const { morningTea } = formRenderProps.values;    
        const fruitOptions = ['apple', 'orange', 'banana', 'grapes'];
        <Field
          name = "morningTea"
          component = {SelectField}
          label = "Fruit for Morning Tea"
          options = {fruitOptions}
        />
        <Field
          name = "afternoonTea"
          component = {SelectField}
          label = "Fruit for Afternoon Tea"
          options = {_.without(fruitOptions, morningTea)}
        />
    }}
/>

我还在 Sandbox 上创建了一个示例。对于任何有相同问题的人。