React Props传递故障：选中的Program未在EnrollmentForm中显示

问题核心原因 #

1. 入口组件未启用带状态的逻辑：项目入口是App.js，但原App.js直接渲染不带chosenProgram props的EnrollmentForm，而包含下拉选择和状态管理的program.js中的App组件从未被作为入口执行，导致Props根本没有传递到表单组件。
2. 下拉选择事件逻辑错误：原handleChange中使用event.target.textContent获取选中选项文本，这在<select>元素上无法正确获取选中项的显示内容，同时select的value属性与state值不匹配，导致状态更新异常。
3. 组件名称拼写不一致：EnrollmentForm（导入名）与EnrolmentForm（组件定义名）拼写差异，虽未直接引发当前问题，但易导致后续维护错误。

修复方案与代码调整 #

1. 统一入口组件逻辑 #

将下拉选择和状态管理逻辑整合到项目入口App.js中，确保带状态的组件被正确渲染并传递Props：

import './App.css';
import EnrollmentForm from './EnrollmentForm';
import { useState } from "react";

function App() {
  // 初始状态设为默认选项的显示文本
  const [program, setProgram] = useState("Undergraduate");
  
  const handleChange = (event) => {
    // 通过selectedIndex获取选中选项的显示文本
    const selectedOption = event.target.options[event.target.selectedIndex];
    setProgram(selectedOption.text);
  };

  return (
    <div className="App">
      <div className="programs">
        <label>Choose Program:</label>
        <select 
          className="appDropDowns"
          onChange={handleChange}
          // value与state同步，确保选中状态正确
          value={program}
        >
          <option value="Undergraduate">Undergraduate</option>
          <option value="Postgraduate">Postgraduate</option>
        </select>
      </div>
      {/* 传递选中的program作为props */}
      <EnrollmentForm chosenProgram={program} />
    </div>
  );
}

export default App;

2. 统一组件拼写并保留原有表单逻辑 #

将组件定义名统一为EnrollmentForm，确保导入与定义一致：

import { useState } from "react";
import "./App.css";

function EnrollmentForm(props) {
  const [firstName, setFirstName] = useState("");
  const [lastName, setLastName] = useState("");
  const [welcomeMessage, setWelcomeMessage] = useState("");

  const handleSubmit = (event) => {
    setWelcomeMessage(`Welcome ${firstName} ${lastName}`);
    event.preventDefault();
  };

  return (
    <div>
      <form className="enrolForm" onSubmit={handleSubmit}>
        {/* 渲染传递过来的chosenProgram */}
        <h1>{props.chosenProgram} Student Details</h1>
        <label>First name:</label>
        <input
          type="text"
          name="fname"
          onBlur={(event) => setFirstName(event.target.value)}
        />
        <br />
        <label>Last name:</label>
        <input
          type="text"
          name="lname"
          onBlur={(event) => setLastName(event.target.value)}
        />
        <br />
        <br />
        <input type="submit" value="Submit" />
        <br />
        <label id="studentMsg" className="message">
          {welcomeMessage}
        </label>
      </form>
    </div>
  );
}

export default EnrollmentForm;

验证效果 #

修改后运行项目，选择下拉菜单中的选项，表单标题会同步显示选中的Program名称，符合预期需求。

内容的提问来源于stack exchange，提问作者Janab Ali