我正在使用组件 MenuItem (material-UI)并且我正在尝试在用户按下“tab”键时选择一个项目,类似这样:
{Object.keys(Countries).map(key => (
<MenuItem key={key} value={Countries[key]} onKeyDown={(ev) => {
if(ev.key === 'Tab') {
//How can I choose the selected item with tab key?
}
}}>
{Countries[key]}
</MenuItem>
))}
最佳答案
您需要菜单项才能访问 Select 的更改处理程序。当出现 Tab 时,它应该将菜单项的 value
发送到更改处理程序,方式与单击时发生的方式类似——通过 event.target.value
。
下面是一个工作示例:
import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import MenuItem from "@material-ui/core/MenuItem";
import TextField from "@material-ui/core/TextField";
const useStyles = makeStyles(theme => ({
container: {
display: "flex",
flexWrap: "wrap"
},
textField: {
marginLeft: theme.spacing(1),
marginRight: theme.spacing(1),
width: 200
},
dense: {
marginTop: 19
},
menu: {
width: 200
}
}));
const currencies = [
{
value: "USD",
label: "$"
},
{
value: "EUR",
label: "€"
},
{
value: "BTC",
label: "฿"
},
{
value: "JPY",
label: "¥"
}
];
const SelectOnTabMenuItem = React.forwardRef(
({ "data-value": valueForEvent, value, onChange, ...other }, ref) => {
const handleKeyDown = event => {
if (event.key === "Tab") {
event.persist();
// Getting the value from the "data-value" prop is necessary
// due to the manner in which Material-UI clones the MenuItem during
// display of the Select: https://github.com/mui-org/material-ui/blob/v4.5.1/packages/material-ui/src/Select/SelectInput.js#L226
event.target = { value: valueForEvent };
onChange(event);
}
};
return (
<MenuItem ref={ref} value={value} onKeyDown={handleKeyDown} {...other} />
);
}
);
export default function TextFields() {
const classes = useStyles();
const [values, setValues] = React.useState({
currency: currencies[0]
});
const handleChange = name => event => {
setValues({ ...values, [name]: event.target.value });
};
const currencyHandleChange = handleChange("currency");
return (
<form className={classes.container} noValidate autoComplete="off">
<TextField
id="standard-select-currency"
select
label="Select"
className={classes.textField}
value={values.currency}
onChange={currencyHandleChange}
SelectProps={{
MenuProps: {
className: classes.menu
},
renderValue: option => option.label
}}
helperText="Please select your currency"
margin="normal"
>
{currencies.map(option => (
<SelectOnTabMenuItem
onChange={currencyHandleChange}
key={option.value}
value={option}
>
{option.label} ({option.value})
</SelectOnTabMenuItem>
))}
</TextField>
</form>
);
}
关于reactjs - 如何使用 Tab 键在 Material-UI 上选择项目?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58439586/