Материал пользовательского интерфейса Выбрать ручку Изменить

Question

• 1000 выбирает из массива объектов.
пример: {label: "string", value: "string", b: boolean}

Мой вопрос в том, как я могу изменить этот handleChange для работы с массивом объектов ?
Я пытаюсь заменить string [] на созданный мной dataType [], но получаю сообщение об ошибке «Аргумент типа 'string' не может быть назначен параметру типа 'dataType'.

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

Когда я пытаюсь это сделать, консоль регистрирует правильное выбранное значение, но когда я меняю console.log на setValue (event.target.value), я получаю значение ошибки. Map не является функцией.

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

Код выше работает, когда console.log.

Answer 1

Компонент выбора использует тип basi c, чтобы определить, какие параметры выбраны (сравнение объектов не так просто). Вы можете использовать индекс массива:

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([]);
  const [selectedUserIndexes, setSelectedUserIndexes] = React.useState([]);

  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 (
    
      
         Собственный  handleChangeMultiple (e)} inputProps = {{id: 'select-multiple-native',}}> {users.map ((user, index) => ( {user.label} {} ))}   ); }