如何从外部JS文件加载React MUI Dialog下拉选项值？

以下是具体实现步骤：

1. 创建外部配置文件 #

在Dialog组件的同目录下新建options.js文件，将下拉选项以数组形式导出：

// options.js
export const classOptions = [
  { value: 'Psychology', label: 'Psychology' },
  { value: 'English 101', label: 'English 101' }
];

export const assignmentTypeOptions = [
  { value: 'Exams', label: 'Exams' },
  { value: 'Quizzes', label: 'Quizzes' },
  { value: 'Homework', label: 'Homework' }
];

2. 在Dialog组件中导入配置 #

修改FormDialog.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 { classOptions, assignmentTypeOptions } from './options';

3. 替换硬编码选项为动态生成 #

将两个Select组件中的硬编码MenuItem替换为循环生成的选项：

课程下拉框修改： #

<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}
  >
    {classOptions.map(option => (
      <MenuItem key={option.value} value={option.value}>
        {option.label}
      </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}
  >
    {assignmentTypeOptions.map(option => (
      <MenuItem key={option.value} value={option.value}>
        {option.label}
      </MenuItem>
    ))}
  </Select>
</FormControl>

完整修改后的Dialog组件代码 #

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 { classOptions, assignmentTypeOptions } from './options';

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}
            >
              {classOptions.map(option => (
                <MenuItem key={option.value} value={option.value}>
                  {option.label}
                </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}
            >
              {assignmentTypeOptions.map(option => (
                <MenuItem key={option.value} value={option.value}>
                  {option.label}
                </MenuItem>
              ))}
            </Select>
          </FormControl>
        </DialogContent>
        <DialogActions>
          <Button onClick={handleClose}>Cancel</Button>
          <Button onClick={handleClose}>Save</Button>
        </DialogActions>
      </Dialog>
    </div>
  );
}

关键注意点 #

• 确保options.js与Dialog组件文件在同一目录，导入路径正确
• 循环生成MenuItem时必须添加唯一key属性，避免React渲染警告
• 后续修改下拉选项只需更新options.js即可，无需改动Dialog组件逻辑

内容的提问来源于stack exchange，提问作者Jose Rangel