Блог

Я использую Formik с реактивными крючками и пытаюсь выбрать сразу несколько групп. используя поле выбора формы, но все еще не выясняя, как выбрать более одного параметра.

Компонент UserAdd

   <div>
                            <Field
                                options={groups}
                                label="Groups"
                                name="groupId"
                                component={SelectFormField}
                                keyName='groupId'
                                valueName='groupName'
                            />
                        </div>
 

Поле выбора формы

 import { getIn } from "formik";
import React, { useEffect } from "react";
import {
    FormControl,
    InputLabel,
    Select,
    MenuItem,
    FormHelperText
} from "@material-ui/core";

export const SelectFormField = ({ field, form, label, options, keyName , valueName ,  ...props }) => {
    const errorText =
        getIn(form.touched, field.name) amp;amp; getIn(form.errors, field.name);
    return (
        <FormControl fullWidth error={!!errorText}>
            {label amp;amp; <InputLabel>{label}</InputLabel>}
            <Select
                fullWidth
                {...field}
                {...props}
            >
                {options.map(op => (
                    <MenuItem key={op.[keyName]} value={op.[keyName]}>
                        {op.[valueName]}
                    </MenuItem>
                ))}
            </Select>
            <FormHelperText>{errorText}</FormHelperText>
        </FormControl>
    );
};
 

Вы пробовали использовать «множественную» опору в компоненте MUI Select, как это?

 import { getIn } from "formik";
import React, { useEffect } from "react";
import {
    FormControl,
    InputLabel,
    Select,
    MenuItem,
    FormHelperText
} from "@material-ui/core";

export const SelectFormField = ({ field, form, label, options, keyName , valueName ,  ...props }) => {
    const errorText =
        getIn(form.touched, field.name) amp;amp; getIn(form.errors, field.name);
    return (
        <FormControl fullWidth error={!!errorText}>
            {label amp;amp; <InputLabel>{label}</InputLabel>}
            <Select
                fullWidth
                multiple
                {...field}
                {...props}
            >
                {options.map(op => (
                    <MenuItem key={op.[keyName]} value={op.[keyName]}>
                        {op.[valueName]}
                    </MenuItem>
                ))}
            </Select>
            <FormHelperText>{errorText}</FormHelperText>
        </FormControl>
    );
};