React-Final-Form с DropDown в дочернем компоненте, как? - PullRequest
Новая
       21

React-Final-Form с DropDown в дочернем компоненте, как?

0 голосов
/ 06 марта 2019

Я пытаюсь использовать React-final-form с DropDown в дочернем компоненте.Не могу заставить это работать.

Все мои текстовые поля уже находятся в дочернем компоненте, и это работает как шарм.Поле в родительском элементе выглядит следующим образом: 

<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" происходят из semantic-ui-реакции

Но теперь я хочу сделать то же самое с DropDown.Стандартный DropDown , взятый из примера на сайте 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>

И это работает в том смысле, что я получаю значение вмои значения реакции-окончательной формы onSubmit.затем я пытаюсь разгрузить сам Dropdown на дочерний компонент (с намерением использовать версию Dropdown с семантической и пользовательской реакцией, но обо всем по порядку и заставим 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 нет.Я не могу понять, что мне здесь не хватает, и ваша помощь будет очень признательна.

Заранее спасибо, Берт

Ответы [ 2 ]

2 голосов
/ 08 марта 2019

Если вы используете render-props для toppingsB, тогда Field component prop не должен иметь тип "select", так как дочерние элементы Field будут функцией, а не несколькими тегами.

Также похоже, что вы не сообщаете своей форме о любых изменениях, происходящих внутри дочернего компонента. Попробуйте передать компоненту Opts функцию onChange в качестве реквизита: 

 <Opts 
    options={options}
    name={input.name}
    onChange={ (value:string) => input.onChange(value)}
  />
1 голос
/ 08 марта 2019

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