访问反应最终形式组件上的同级字段的值

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类型也具有“值”属性。从此处开始，在由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)}
        />
    }}
/>

我还在沙盒上为有相同问题的任何人创建了一个示例。