Как я могу использовать materialui select для массива в formik - PullRequest
Новая
       39

Как я могу использовать materialui select для массива в formik

0 голосов
/ 27 апреля 2020

// Этот код, показанный ниже, я использую для выбора выпадающего списка, он работает только для одного выбора. Как я могу сделать это для списка массива, пользователь позволит выбрать более одного элемента из выпадающего списка? Я прочитал статью, мне нужно использовать fieldarray но я действительно пытаюсь не получить результат, так что есть кто-нибудь, чтобы помочь мне :) 

// select component
import React from "react";
import { Field, ErrorMessage } from "formik";

const MaterialUISelectField = ({
    errorString,
    label,
    children,
    value,
    name,
    onChange,
    onBlur,
    required,
}) => {
    return (
        <FormControl fullWidth>
            <InputLabel required={required}>{label}</InputLabel>
            <Select
                name={name}
                onChange={onChange}
                onBlur={onBlur}
                value={value}
            >
                {children}
            </Select>
            <FormHelperText error={true}> {errorString}</FormHelperText>
        </FormControl>
    );
};

const FormikSelect = ({ name, items, label, required = false, error }) => {
    return (
        <div className="FormikSelect">
            <Field
                name={name}
                as={MaterialUISelectField}
                label={label}
                errorString={error ? error : <ErrorMessage name={name} />}
                required={required}
            >
                {items.map(item => (
                    <MenuItem key={item.Id} value={item.Id}>
                        {item.Ad}
                    </MenuItem>
                ))}
            </Field>
        </div>
    );
};

// this is how ı use select on ui 
  <FormikSelect
       name="Cities"
       label="Cities"
       items={cities}
       required
       onChange={(e) => setCities(e.target.value)} />

// this is my initial values ım not sure I use it correct or not
const initialValues = {
    Cities: [{ Id: "", Ad: "" }]
}
...