与子分量下拉的反应最终形式，如何

Question

我试图使用子部分下拉的反应基础形式。无法工作。

我的所有文本字段已经在子部分中，这就像魅力一样。父母中的字段看起来像这样：

<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"one_answers" label"来自Smantic-UI-React

，但是现在我想在下拉列表中做同样的事情。标准下拉列表取自React-Final-Form网站上的一个示例，看起来像这样：

<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>

从某种意义上说，我可以在我的反应基形式值中获得值。然后，我试图将下拉列表本身卸载到子组件（目的是使用Smantic-UI-Reacts版本的下拉列表，但首先是首先要进行下拉列表的工作:-)）

）

父组件：

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看起来相同（我猜想的话并没有说太多），在值（OnSubmit上）中拾取了Toppingsa，而ToppingSb则不是。我无法弄清楚我在这里错过了什么，您的帮助将不胜感激。

预先感谢Bert

Answer 1

如果您正在为toppingsb使用Render-Props，则字段component Prop不应键入"选择"，因为字段的孩子将是一个函数，而不是多个标签。

看起来您还没有让您的表格知道子组件内发生的任何更改。尝试通过Opts组件作为prop：

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

Answer 2

@s.taylor，谢谢您的帮助！它有效。

作为参考工作代码：

父组件中的字段：

<Field name="toppingsB" options={eatOptions} >
    { ({input,  meta, options}) => {
        return (
            <Opts
                options={options}
                name={input.name}
                onChange={ (value) => input.onChange(value)}
            />
        )
    }}
</Field>

和儿童组件中的代码：

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