Reactjs 如何在子组件中使用下拉菜单反应最终表单？

我试图在子组件中使用带有下拉菜单的React final form。 不能让它工作

我所有的文本字段都已经在子组件中，这就像一个符咒。 父项中的字段如下所示：

{（{输入，元，占位符}）=>(
)}

子组件如下所示：

export const MyField=（道具）=>{
返回(
{props.label？props.label:props.placeholder}
)
};

“Form.Field”和“Label”来自

但是现在我想用下拉菜单做同样的事情。 标准下拉列表如下所示：

鸡
火腿
蘑菇
奶酪
金枪鱼
菠萝

从某种意义上讲，它是有效的，我得到的值在我的react final form-values-onSubmit中。 然后，我尝试将下拉列表本身卸载到子组件（打算使用语义ui react版本的下拉列表，但首先要做的是让下拉列表工作：-）

父组件：

const eat选项=[
{键：'c'，文本：'Chicken'，值：'Chicken'}，
{键：'h'，文本：'Ham'，值：'Ham'}，
{key:'m'，text:'smusles'，value:'smusles'}，
{键：'t'，文本：'Tuna'，值：'Tuna'}
];
//并以以下形式：
{（{input，meta，options}）=>{
返回(
)
}}

在子组件中：

export const Opts=（道具）=>{
返回(
{props.options.map（（x）=>{
返回(
{x.text}
)
})}
)
};

结果是HTML看起来是一样的（我想这并没有说太多），ToppingsA在值中被拾取（在onSubmit上），而ToppingsB则不是。 我不知道我错过了什么，非常感谢你的帮助

提前感谢,，

---

Bert

如果您正在使用toppingsB的渲染道具，则字段

组件

道具不应为“选择”类型，因为字段的子项将是一个函数，而不是多个标记

看起来您没有让表单知道子组件内部发生的任何更改。尝试将onChange函数作为prop传递给

Opts

组件：

 <Opts 
    options={options}
    name={input.name}
    onChange={ (value:string) => input.onChange(value)}
  />

input.onChange（值）}
/>

@S.Taylor，谢谢你的帮助！！它起作用了

作为参考，工作守则：

父组件中的字段：

{（{input，meta，options}）=>{
返回(
input.onChange（值）}
/>
)
}}

以及子组件中的代码：

export const Opts=（道具）=>{
返回(
{props.options.map（（x）=>{
返回(
{x.text}
)
})}
)
};