在子組件中使用DropDown的React-Final-Form，如何？

Question

我正在嘗試在子組件中使用帶有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反應

但是現在我想對DropDown做同樣的事情。 從React-Final-Form網站上的示例中提取的標准DropDown看起來像這樣：

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

從某種意義上說，我的反應最終形式的值是onSubmit。 然后我試圖將Dropdown本身卸載到Child Component（目的是使用Dropdown的語義ui反應版本，但首先要使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則不是。 我不知道我在這里想念什么，非常感謝您的幫助。

預先感謝，伯特

Answer 1

如果您正在使用render-props作為toppingsB，則Field component prop不應鍵入“ select”，因為Field的子級將是一個函數，而不是多個標簽。

看起來您也沒有讓表單知道子組件內部發生的任何更改。 嘗試向Opts組件傳遞onChange函數作為道具：

 <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>
    )
};