Элемент меню Material-ui не работает с элементом Select в поле формы-редуктора (форма-редуктора 8.2) - PullRequest
Новая
       26

Элемент меню Material-ui не работает с элементом Select в поле формы-редуктора (форма-редуктора 8.2)

0 голосов
/ 10 июля 2019

Я пытаюсь создать выбор (выпадающий список), используя Material-UI в форме приставки.На их веб-сайте .

есть пример использования селекторов M-UI в форме редукса. Я бы хотел сделать пример того же типа, за исключением использования MenuItem пользовательского интерфейса материала вместо тегов параметров.используется в примере.

Кажется, что просто замена параметров с помощью MenuItems не работает, и элементы MenuItem не отображаются под дочерними элементами для поля выбора.Я получил это для работы с параметрами:

Вот renderSelectField, используемый для создания компонента выбора.Это работает: 

renderSelectField = ({ input, label, meta: { touched, error }, children, ...custom }) => (
    <FormControl className={this.props.classes.formControl} error={touched && error}>
        <InputLabel>{label}</InputLabel>
        <Select
            native
            {...input}
            {...custom}
        >
            {children}
        </Select>
        {this.renderFormHelper({ touched, error })}
    </FormControl>
)

А вот рендер: 

render() {
    return (
        <div>
            <form onSubmit={this.props.handleSubmit(this.props.submitForm)}>
                <Field name={"sheetType"} component={this.renderSelectField} label={"Sheet Type"}>
                    <MenuItem value={"basic"} primaryText={"Basic"}>Basic</MenuItem>
                    <MenuItem value={"advanced"} primaryText={"Advanced"}>Advanced</MenuItem>
                </Field>
                <Button onClick={this.props.onCancel}>Cancel</Button>
                <Button type="submit" color={"secondary"}>Next</Button>
            </form>
        </div>
    )
}

Я ожидаю, что в качестве дочерних элементов MenuItem будут переданы два элемента выпадающего меню, но я считаю, что нужныбыть некоторым свойством, переданным в сам MenuItem.

Замена пункта меню с тегами опций работает.

1 Ответ

1 голос
/ 10 июля 2019

Вы смешиваете между простым выбором и собственным выбором .Если вы собираетесь использовать native, измените <MenuItem> на <option>, в противном случае просто удалите свойство native.

Собственный шаблон: 

<Select native>
    <option value="item">item</option>
</Select>

Простой шаблон выбора: 

<Select>
    <MenuItem value="item">item</MenuItem>
</Select>
...