ReactJS Dialog Component

Question

我有一个来自

的对话框内容组件https://mui.com/material-ui/react-dialog/

我希望它在输入字段中有下拉选项。我有下拉选项与硬编码值工作(见下面的菜单项)，但我想从另一个。js文件驻留在同一目录中的地图拉值。下面是对话框组件的代码:

import * as React from 'react';
import Button from '@mui/material/Button';
import TextField from '@mui/material/TextField';
import { Select } from '@mui/material';
import MenuItem from '@mui/material/MenuItem';
import {FormControl} from '@mui/material';
import {InputLabel} from '@mui/material';
import Dialog from '@mui/material/Dialog';
import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent';
import DialogContentText from '@mui/material/DialogContentText';
import DialogTitle from '@mui/material/DialogTitle';
import { countReset } from 'console';
export default function FormDialog() {
const [open, setOpen] = React.useState(false);
const [className, setClassName] = React.useState('');
const [assignmentType, setAssignmentType] = React.useState('');
const handleChangeClass = (event) => {
setClassName(event.target.value);
};
const handleChangeAssignment = (event) => {
setAssignmentType(event.target.value);
};
const handleClickOpen = () => {
setOpen(true);
};
const handleClose = () => {
setOpen(false);
};
return (
<div>
<Button variant="outlined" onClick={handleClickOpen}>
Open form dialog
</Button>
<Dialog open={open} onClose={handleClose}>
<DialogTitle>Create a New Event</DialogTitle>
<DialogContent>
<DialogContentText>
Please enter the Title of your newly created Event here:
</DialogContentText>
<TextField
autoFocus
margin="dense"
id="name"
label="Title"
type="title"
fullWidth
variant="standard"
/>
<FormControl fullWidth>
<InputLabel id="demo-simple-select-label">Class</InputLabel>
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
value={className}
label="Classes"
onChange={handleChangeClass}
>
<MenuItem value={course.name}></MenuItem>
<MenuItem value={'Pyschology'}>Psychology</MenuItem>
<MenuItem value={'English 101'}>English 101</MenuItem>
</Select>
</FormControl>
<FormControl fullWidth>
<InputLabel id="demo-simple-select-label">Assignment Type</InputLabel>
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
value={assignmentType}
label="Assignment Type"
onChange={handleChangeAssignment}

>
<MenuItem value={'Exams'}>Exams</MenuItem>
<MenuItem value={'Quizzes'}>Quizzes</MenuItem>
<MenuItem value={'Homework'}>Homework</MenuItem>
</Select>
</FormControl>
</DialogContent>
<DialogActions>
<Button onClick={handleClose}>Cancel</Button>
<Button onClick={handleClose}>Save</Button>
</DialogActions>
</Dialog>
</div>
);
}

我怎么知道这个?

我尝试导出包含值的映射。也许我做错了。

Answer 1

<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
value={assignmentType}
label="Assignment Type"
onChange={handleChangeAssignment}

>
{array.map(item => {
return(
<MenuItem value={item.value}>. 
{item.value}</MenuItem>)
}}
</Select>

Answer 2

我不确定我是否直接进入了你的问题。你能检查一下这个代码盒吗?https://codesandbox.io/s/funny-night-3exicn?file=/src/App.js我希望这对你有帮助。

如果你需要更多帮助，请告诉我。