Question

就我的法典而言,我正试图根据选择的路线更新选定的程序清单。我根据课程变动找到了相关教授,但无法说明如何迫使候选人名单根据课程选择更新。任何帮助都受到高度赞赏!

import { Modal, Button, Form, Row, Col } from "react-bootstrap";
import { useState } from "react";

export default function CreateReview(props) {
  const [show, setShow] = useState(false);

  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);

  const yearOptions = [];
  for (let i = 2020; i <= new Date().getFullYear(); i++) {
    yearOptions.push(
      <option key={i} value={i}>
        {i}
      </option>
    );
  }

  var selectedCourseID;

  const handleCourseChange = (e) => {
    selectedCourseID = e.target.value;
    relevantProfessors();
  };

  var relevantProfs = [];

  function relevantProfessors() {
    relevantProfs = [];
    props.profData.map((prof) => {
      if (prof.courseID == selectedCourseID) {
        relevantProfs.push(prof.professor);
      }
    });
    console.log(relevantProfs);
  }

  function submitHandler() {}

  return (
    <>
      <Button variant="primary" onClick={handleShow}>
        Create a Review
      </Button>

      <Modal show={show} onHide={handleClose}>
        <Modal.Header closeButton>
          <Modal.Title>Create New Review</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <Form onSubmit={submitHandler}>
            <Form.Select
              placeholder="selectCourse"
              required={true}
              aria-label="Course Selection"
              onChange={handleCourseChange}
            >
              <option key="blankChoice" hidden value>
                Select a Course
              </option>
              {props.courseData.map((course) => (
                <option key={course.courseID} value={course.courseID}>
                  CIT {course.courseID}: {course.courseName}
                </option>
              ))}
            </Form.Select>
            <Row>
              <Col>
                <Form.Select
                  placeholder="selectSemester"
                  required={true}
                  aria-label="Semester Taken"
                >
                  <option key="blankChoice" hidden value>
                    {" "}
                    Semester{" "}
                  </option>
                  <option>Fall</option>
                  <option>Spring</option>
                  <option>Summer</option>
                </Form.Select>
              </Col>
              <Col>
                <Form.Select
                  placeholder="selectYear"
                  required={true}
                  aria-label="Year Taken"
                >
                  <option key="blankChoice" hidden value>
                    {" "}
                    Year{" "}
                  </option>
                  {yearOptions}
                </Form.Select>
              </Col>
            </Row>
            <br />
            <Form.Select
              placeholder="selectProf"
              required={true}
              aria-label="Professor Selection"
            >
              <option key="blankChoice" hidden value>
                Select a Professor
              </option>
              {relevantProfs.forEach((prof) => {
                console.log(prof);
                return <option>{prof}</option>;
              })}
            </Form.Select>

            <Form.Group className="mb-3" controlId="formBasicPassword">
              <Form.Label>Password</Form.Label>
              <Form.Control type="password" placeholder="Password" />
            </Form.Group>
            <Form.Group className="mb-3" controlId="formBasicCheckbox">
              <Form.Check type="checkbox" label="Check me out" />
            </Form.Group>
            <button>Publish Review</button>
          </Form>
        </Modal.Body>
      </Modal>
    </>
  );
}

我试图补充:

const [show, setShow] = useState(false);
  const [selectedCourseID, setSelectedCourseID] = useState("");
  const [relevantProfs, setRelevantProfs] = useState([]);

  const handleCourseChange = (e) => {
    const courseID = e.target.value;
    setSelectedCourseID(courseID);
    const profs = props.profData.filter((prof) => prof.courseID === courseID);
    setRelevantProfs(profs.map((prof) => prof.professor));
  };

但它与我目前具有同等效力。谢谢!

Answer 1

我得以确定对我问题的答复。我只是补充说,在选定课程时,使用国是:

  var relevantProfs = [];

  function relevantProfessors() {
    relevantProfs = [];
    props.profData.map((prof) => {
      if (prof.courseID == selectedCourseID) {
        relevantProfs.push(prof.professor);
      }
    });
  }

  const [relatedProfs, setRelatedProfs] = useState(relevantProfs);

摘自相关程序上的每一页,改为:

<Form.Select
            placeholder="selectProf"
            required={true}
            aria-label="Professor Selection"
            options={relatedProfs}
          >
            {relatedProfs.map((prof) => {
              return <option>{prof}</option>;
            })}
          </Form.Select>

友情链接