如何使用选择选项值来显示来自我的 API 的特定数据？答案

【问题标题】：How can I use select option value to display specific data from my API?如何使用选择选项值来显示来自我的 API 的特定数据？
【发布时间】：2022-11-18 01:48:11
【问题描述】：

在我的 API 数据中，我有 12 个学期的数据（从 Fall16 到 Fall23）。使用此代码，我将显示所有学期的主时间表，但我创建了一个选择选项按钮，用户可以在其中选择他们想要查看的学期。如何使用选定的值显示特定数据？例如，如果用户选择 FALL22，代码应该打印 semester = fall22 的数据。

在 API 中，学期由数字表示。列 = SemesterID（从 12 到 1）12-fall22，以及 1-fall16。

import './Home.css';
import {React, useState } from 'react';
import Box from '@mui/material/Box';
import { DataGrid, GridToolbar } from '@mui/x-data-grid';
import {getMasterSchedule} from "./SharedService";

const columns = [{field: "CRN", headerName: "CRN", width: 100},
                 {field: "CourseID", headerName: "Course ID", width: 90},
                 {field: "SectionNumber", headerName: "Section", width: 80},
                 {field: "CourseName", headerName: "Course Name", width: 300},
                 {field: "FirstName", headerName: "Professor", width: 85},
                 {field: "BuildingName", headerName: "Building", width: 150},
                 {field: "RoomNumber", headerName: "Room", width: 80},
                 {field: "SeatsAvailable", headerName: "Seats Available", width: 100},
                 {field: "StartTime", headerName: "Start Time", width: 100},
                 {field: "EndTime", headerName: "End Time", width: 100},
                 {field: "WeekDay", headerName: "Day", width: 100},
                 {field: "SemesterID", headerName: "SemesterID", width: 100}];

function MasterSchedule() {
  const [tableData, setTableData] = useState([])

  getMasterSchedule().then(x => {
    setTableData(x.data)
    }
  );

  const [semester, setSemester] = useState();
  return (
    <>
  
  <br></br>
  <br></br>
  <br></br>
  <br></br>
  <br></br>
  <h1>MASTER SCHEDULE - {semester}</h1>

  <div>
    <h3>Select Semester</h3>
      <select id="semester" value={semester} 
              onChange={(e) => setSemester(e.target.value)}>
              <option value="">--</option>
              <option value="FALL23">FALL23</option>
              <option value ="SPRING23">SPRING23</option> 
              <option value ="FALL22">FALL22</option>
              <option value ="SPRING22">SPRING22</option>
              <option value ="FALL21">FALL21</option>
              <option value ="SPRING21">SPRING21</option>
              <option value ="FALL20">FALL20</option>
              <option value ="SPRING20">SPRING20</option>
              <option value ="FALL19">FALL19</option>
              <option value ="SPRING19">SPRING19</option>
              <option value ="FALL18">FALL18</option>
              <option value ="SPRING18">SPRING18</option>
      </select>
      
    </div>


      <div style={{ height: 650, width: '100%' }}>
      <Box sx={{ height: 400, width: 1 }}>
        <DataGrid
          rows={tableData}
          columns={columns}
          pageSize={10}
          rowsPerPageOptions={[10]}
          getRowId={(row) => row.CRN}

          disableColumnFilter
          disableColumnSelector
          disableDensitySelector
          disableColumnMenu
          components={{ Toolbar: GridToolbar }}
          componentsProps={{
            toolbar: {
              showQuickFilter: true,
              quickFilterProps: { debounceMs: 500 },
            },
          }}
        />
        </Box>
      </div>
      

  
</>

  );
}

export default MasterSchedule;

【问题讨论】：

提示：不要使用换行符作为间距。这不是他们的目的，它会使您的标记变得一团糟。使用边距、填充、弹性对齐等。

标签： javascript reactjs drop-down-menu

【解决方案1】：

对于下拉菜单，始终建议使用键值对。尝试通过引用链接来实现下拉菜单。那么你的下拉选项必须看起来像常量选项 = [ { 标签：“16 年秋季”，价值：1 }， . . . . . { 标签：“22 岁秋季”，价值：12 } ];

有了这个，您可以获得所选选项的正确 semesterId https://codesandbox.io/s/hqukt?file=/src/Components/DropdownEXP.js

【讨论】：