![](/img/trans.png)
[英]material ui slider component onChange event not working with Fromik handleChange event
[英]material ui Select handleChange
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);
};
我刚开始使用 Material UI,他们有这个很棒的 Select 组件,可以让你从列表中获取 select。
上面的代码是他们提供的适用于字符串 [] 的示例代码,但我的项目是从 object 数组中选择的。
示例:{标签:“字符串”,值:“字符串”,b:布尔}
我的问题是如何修改这个 handleChange 以适用于 object 阵列?
我尝试将 string[] 更改为我创建的 dataType[],但出现错误“'string' 类型的参数不可分配给'dataType' 类型的参数。
const handleChangeMultiple = (event: ChangeEvent<{ value: dataType[] }>) => {
console.log(event.target.value)
}
当我尝试这个时,它控制台记录选择的正确值,但是当我将 console.log 更改为 setValue(event.target.value) 时,我得到错误值。map 不是 function。
{value.map((item) => (
option key={item.value} value={item.label}>
{item.label}
</option>
上面的代码在 console.log 时工作。
Select 组件使用基本类型来确定选择了哪些选项(比较对象并不那么容易)。 您可以使用数组索引:
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>
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.