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);
  };

我刚刚开始使用实质性用户界面，并且它们具有出色的Select组件，可让您从列表中进行选择。
上面的代码是他们提供的适用于string []的示例代码，但是我的项目是从对象数组中选择。
例如：{label：“字符串”，值：“ string”，b：布尔值}

我的问题是如何修改handleChange以使其适用于对象数组？
我尝试将string []更改为我创建的dataType []，但出现错误“类型为'string'的参数不能分配给类型为'dataType'的参数。

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

当我尝试此操作时，它会控制台记录所选的正确值，但是当我将console.log更改为setValue（event.target.value）时，会出现错误value.map不是函数。

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

上面的代码在console.log上起作用。

Answer 1

选择组件正在使用基本类型来确定选择了哪些选项（比较对象并不是那么容易）。您可以使用数组索引：

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>
  );
}

材质ui选择handleChange

1 个答案: