3

我在 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”列表不是它自己的字段。

4

2 回答 2

8

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

本质上，文档只是缺少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)}
        />
    }}
/>

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

于 2018-02-07T02:55:49.040 回答
0

如果您可以在“morningTea”字段中获取选项的值，则可以这样做假设该值存储为“morningTea.value”

你可以像这样传递选项：

 <Field
   name = "afternoonTea"
   component = {SelectField}
   label = "Fruit for Afternoon Tea"
   options = {fruitOptions.filter(option => option != morningTea.value)}
 />

我通过这个概念假设它：

 const q = [1,2,3,4,5]
    console.log(q) = "[1,2,3,4,5]"
const y = q.filter(w => w != 1 )
    console.log(y) = "[2,3,4,5]"
于 2018-02-07T02:30:10.517 回答