材质 ui Select 手柄更改

Question

  const handleChangeMultiple = (event: React.ChangeEvent<{ value: unknown }>) => {
    const { options } = event.target as HTMLSelectElement;
    const value: string[] = [];
    for (let i = 0, l = options.length; i < l; i += 1) {
      if (options[i].selected) {
        value.push(options[i].value);
      }
    }
    setPersonName(value);
  };

I just started using material UI and they have this great Select component that let you select from a list.
The code above is the sample code they provided that work for a string[], but my project is selecting from an object array.
example: {label: "string", value:"string", b: boolean}

My question is how can I modify this handleChange to work for an object array?
I try changing string[] to the dataType[] I created but I get the error "Argument of type 'string' is not assignable to parameter of type 'dataType'.

const handleChangeMultiple = (event: ChangeEvent<{ value: dataType[] }>) => {
    console.log(event.target.value)
}

When I try this, it console log the correct value selected, but when I change console.log to setValue(event.target.value), I get error value.map is not a function.

{value.map((item) => (
    option key={item.value} value={item.label}>
      {item.label}
    </option>

The code above work when console.log.

Answer 1

Select component is using basic type to determine which options are selected (Comparing objects is not so easy). You can use the array index:

import React from 'react';
import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
import InputLabel from '@material-ui/core/InputLabel';
import FormControl from '@material-ui/core/FormControl';
import Select from '@material-ui/core/Select';

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    formControl: {
      margin: theme.spacing(1),
      minWidth: 120,
      maxWidth: 300,
    },
    chips: {
      display: 'flex',
      flexWrap: 'wrap',
    },
    chip: {
      margin: 2,
    },
    noLabel: {
      marginTop: theme.spacing(3),
    },
  }),
);

interface User {
  value: string,
  label: string,
  superUser: boolean
}

const users = [{
  value: 'OliverHansen',
  label: 'Oliver Hansen',
  superUser: true
}, {
  value: 'VanHenry',
  label: 'Van Henry',
  superUser: false
}, {
  value: 'AprilTucker',
  label: 'April Tucker',
  superUser: true
}, {
  value: 'RalphHubbard',
  label: 'Ralph Hubbard',
  superUser: false
}, {
  value: 'OmarAlexander',
  label: 'Omar Alexander',
  superUser: true
}, {
  value: 'CarlosAbbott',
  label: 'Carlos Abbott',
  superUser: false
}];

export default function MultipleSelect() {
  const classes = useStyles();
  const [selectedUsers, setSelectedUsers] = React.useState<User[]>([]);
  const [selectedUserIndexes, setSelectedUserIndexes] = React.useState<number[]>([]);

  const handleChangeMultiple = (event: React.ChangeEvent<{ value: unknown }>) => {
    const { options } = event.target as HTMLSelectElement;
    const selectedUsers: User[] = [];
    const selectedUserIndexes: number[] = [];
    for (let i = 0, l = options.length; i < l; i += 1) {
      if (options[i].selected) {
        let selectedUserIndex = parseInt(options[i].value, 10);
        selectedUsers.push(users[selectedUserIndex]);
        selectedUserIndexes.push(selectedUserIndex);
      }
    }
    console.log(selectedUserIndexes, selectedUsers);
    setSelectedUserIndexes(selectedUserIndexes);
    setSelectedUsers(selectedUsers);
  };

  return (
    <div>
      <FormControl className={classes.formControl}>
        <InputLabel shrink htmlFor="select-multiple-native">
          Native
        </InputLabel>
        <Select
          multiple
          native
          value={selectedUserIndexes}
          onChange={(e) => handleChangeMultiple(e)}
          inputProps={{
            id: 'select-multiple-native',
          }}
        >
          {users.map((user, index) => (
            <option key={index} value={index}>
              {user.label} {}
            </option>
          ))}
        </Select>
      </FormControl>
    </div>
  );
}