反应钩子从下拉菜单中选择多值答案

【问题标题】：reactHooks selecting multi value from the drop down menu反应钩子从下拉菜单中选择多值
【发布时间】：2021-12-01 20:19:06
【问题描述】：

我正在使用带有 reacthooks 的 Formik 并尝试一次选择多组。使用 Formik 选择字段，但仍然不知道如何选择多个选项。

用户添加组件

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

SelectFormField

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) && getIn(form.errors, field.name);
    return (
        <FormControl fullWidth error={!!errorText}>
            {label && <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>
    );
};

【问题讨论】：

标签： reactjs select drop-down-menu react-hooks formik

【解决方案1】：

您是否尝试过像这样在 MUI Select 组件中使用 'multiple' 属性？

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) && getIn(form.errors, field.name);
    return (
        <FormControl fullWidth error={!!errorText}>
            {label && <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>
    );
};

【讨论】：