React MUI Select 复选框错误获取多个值

Question

我正在研究一个带有反应材料 ui v4 的 for。 该表单有多个 select，如下所示：

const [assignee_id, setAssigneeId] = useState([]);

<TextField
                        id="outlined-select-user"
                        select
                        fullWidth
                        variant="outlined"
                        label="Select"
                        multiple
                        renderValue={(selected) => selected.join(', ')}
                        value={assignee_id}
                        onChange={(event) => { setAssigneeId(event.target.value); console.log("selected user", event.target.value) }}
                        helperText="Please select a resource"
                        >
                        {sysusers.map((option) => (
                            <MenuItem key={option.id} value={option.id}>
                                <Checkbox checked={[option.id].indexOf(option.fullnames) > -1} />
                                <ListItemText primary={option.fullnames} />
                                {/* {option.fullnames} */}
                            </MenuItem>
                        ))}
                    </TextField>

我只能 select 一个值，当我尝试像这样获取检查值的索引时：slight_smile：

 <Checkbox checked={[option.id].indexOf(option.fullnames) > -1} />

我收到错误 ``` option.id.indexOf... is not a function。

任何关于我如何获得多个用户的价值的建议或建议将不胜感激。

sysusers 数组如下所示：

"sysusers": [
        {
            "id": 0,
            "fullnames": "TIM WA",
            "email": "TW@xxcom",
            "status": "Active",
            "extension": null,
            "disabled": true,
            "updated_by": 0,
            "created_by": 0,
            "team": 0,
            "role": 0,
            "directreport": 0,
            "date_created": "2021-10-12T11:59:37.000+0000",
            "date_updated": "2021-10-13T09:16:24.000+0000",
            "view": null,
            "roles": {
                "id": 0,
                "role_name": "ICT ADMINISTRATOR",
                "created_by": 0,
                "updated_by": null,
                "date_created": "2021-10-12T12:01:47.000+0000",
                "date_updated": "2021-10-12T12:01:47.000+0000"
            },
            "teams": {
                "id": 0,
                "name": "ICT APPLICATIONS",
                "user": null,
                "team_lead": 1,
                "updated_by": 0,
                "created_by": 0,
                "date_created": "2021-10-12T12:01:00.000+0000",
                "date_updated": "2021-10-22T08:42:48.000+0000",
                "isParent": true,
                "parent_team": null
            }
        },
        {
            "id": 1,
            "fullnames": "Jom Omon",
            "email": "jom@xx.com",
            "status": "Active",
            "extension": "10643",
            "disabled": true,
            "updated_by": null,
            "created_by": 0,
            "team": 0,
            "role": 1,
            "directreport": null,
            "date_created": "2021-10-22T08:42:39.000+0000",
            "date_updated": null,
            "view": null,
            "roles": {
                "id": 1,
                "role_name": "TEAM LEAD",
                "created_by": 0,
                "updated_by": 0,
                "date_created": "2021-10-13T07:44:56.000+0000",
                "date_updated": "2021-10-13T07:44:56.000+0000"
            },
            "teams": {
                "id": 0,
                "name": "ICT APPLICATIONS",
                "user": null,
                "team_lead": 1,
                "updated_by": 0,
                "created_by": 0,
                "date_created": "2021-10-12T12:01:00.000+0000",
                "date_updated": "2021-10-22T08:42:48.000+0000",
                "isParent": true,
                "parent_team": null
            }
        },
        {
            "id": 3,
            "fullnames": "John Doe",
            "email": "john@xx.com",
            "status": "Active",
            "extension": "10760",
            "disabled": false,
            "updated_by": null,
            "created_by": 0,
            "team": 2,
            "role": 1,
            "directreport": null,
            "date_created": "2021-10-22T09:23:52.000+0000",
            "date_updated": null,
            "view": null,
            "roles": {
                "id": 1,
                "role_name": "TEAM LEAD",
                "created_by": 0,
                "updated_by": 0,
                "date_created": "2021-10-13T07:44:56.000+0000",
                "date_updated": "2021-10-13T07:44:56.000+0000"
            },
            "teams": {
                "id": 2,
                "name": "MARKETTING",
                "user": null,
                "team_lead": 3,
                "updated_by": 0,
                "created_by": 0,
                "date_created": "2021-10-22T09:23:28.000+0000",
                "date_updated": "2021-10-22T09:24:01.000+0000",
                "isParent": true,
                "parent_team": null
            }
        }
    ],

Answer 1

我导致了这一点，没有使用复选框：

<label style={{ fontWeight: 'bold', color: 'black' }}> Add A Resource: </label>
                    <FormControl
                        fullWidth
                        className={classes.selectFormControl}
                    >
                        <InputLabel
                        htmlFor="multiple-select"
                        className={classes.selectLabel}
                        >
                        Select Resource
                        </InputLabel>
                        <Select
                        multiple
                        value={assignee_id}
                        variant="outlined"
                        onChange={(event) => {
                            const value = event.target.value;
                            setAssigneeId(value)
                        }}
                        MenuProps={{ className: classes.selectMenu }}
                        classes={{ select: classes.select }}
                        inputProps={{
                            name: "multipleSelect",
                            id: "multiple-select",
                        }}
                        >
                            {sysusers && sysusers.map((option) => (
                            <MenuItem key={option.id} value={option.id}
                                classes={{
                                root: classes.selectMenuItem,
                                selected: classes.selectMenuItemSelectedMultiple,
                                }}>
                                {option.fullnames}
                            </MenuItem>
                        ))}
                        </Select>
                    </FormControl>