React-Final-Form 在子组件中带有 DropDown，怎么样？

我正在尝试在子组件中使用带有 DropDown 的 React-final-form 。 无法让这个工作。

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

<Field
    name="lastName"
    placeholder="Last Name"
    validate={required}
>
    {({input, meta, placeholder}) => (
        <MyField meta={meta} input={input} placeholder={placeholder}/>
    )}
</Field>

子组件如下所示：

export const MyField = (props) => {
    return (
        <Form.Field className={props.meta.active ? 'active' : ''}>
            <Label>{props.label ? props.label : props.placeholder}</Label>
            <Form.Input
                {...props.input}
                placeholder={props.placeholder}
                className={(props.meta.error && props.meta.touched ? 'error' : '')}
            />
        </Form.Field>
    )
};

“Form.Field”和“Label”来自语义 ui 反应 https://react.semantic-ui.com/

但现在我想用 DropDown 做同样的事情。 标准下拉菜单，取自 React-Final-Form 网站上的示例 https://codesandbox.io/s/ww40y2m595，看起来像这样：

<Field name="toppingsA" component="select">
    <option value="chicken">Chicken</option>
    <option value="ham">Ham</option>
    <option value="mushrooms">Mushrooms</option>
    <option value="cheese">Cheese</option>
    <option value="tuna">Tuna</option>
    <option value="pineapple">Pineapple</option>
</Field>

从某种意义上说，它的工作原理是我在提交时得到了我的react-final-form值中的值。 然后我尝试将 Dropdown 本身卸载到子组件（目的是使用 Dropdown 的语义-ui-react 版本，但首先要做的是让 Dropdown 正常工作:-)）

父组件：

const eatOptions = [
    {key: 'c', text: 'Chicken', value: 'chicken'},
    {key: 'h', text: 'Ham', value: 'ham'},
    {key: 'm', text: 'Mushrooms', value: 'mushrooms'},
    {key: 't', text: 'Tuna', value: 'tuna'}
];

// And in the Form:
<Field name="toppingsB" component="select" options={eatOptions}>
    { ({input,  meta, options}) => {
        return (
            <Opts options={options} name={input.name}/>
        )
    }}
</Field>

在子组件中：

export const Opts = (props) => {
    return (
        <select name={props.name}>
            {props.options.map((x) => {
                return (
                    <option key={x.key} value={x.value}>{x.text}</option>
                )
            })}
        </select>
    )
};

结果是 HTML 看起来相同（我猜这并没有说明太多），ToppingsA 在值中被选取（在 onSubmit 上），而 ToppingsB 则没有。 我不知道我在这里缺少什么，非常感谢您的帮助。

提前致谢， 伯特

如果您使用 render-props 作为 toppingsB 那么 Fieldcomponentprop 不应输入“select”，因为 Field 的子级将是一个函数而不是多个标签。

看起来您也没有让表单知道子组件内发生的任何更改。尝试通过Opts组件一个 onChange 函数作为 prop：

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