React实现：根据下拉选择自动填充禁用表单输入框

要实现选择学生后自动填充姓名到禁用输入框的功能，只需调整select组件的onChange逻辑，同步更新姓名状态即可，具体步骤如下：

1. 修改Select组件的onChange处理函数 #

当用户选择选项时，除了设置userID状态，还要根据选中的userID在studentOption数组中匹配对应的学生信息，然后更新firstName和lastName状态：

<select
  className="form-select"
  aria-label="Default select example"
  onChange={(e) => {
    const selectedUserId = e.target.value;
    setUserID(selectedUserId);
    
    // 根据选中的userID查找对应的学生对象
    const selectedStudent = studentOption.find(student => student.userID === selectedUserId);
    
    if (selectedStudent) {
      setFirstName(selectedStudent.firstName);
      setLastName(selectedStudent.lastName);
    } else {
      // 选择默认提示选项时，清空姓名输入框
      setFirstName("");
      setLastName("");
    }
  }}
>
  <option value="">Select Student User Account</option>
  {studentOption.map((student) => (
    <option key={student.userID} value={student.userID}>
      {student.firstName} {student.lastName}
    </option>
  ))}
</select>

注意：给默认选项加上value=""，这样选择它时能正确触发清空逻辑。

2. 优化禁用输入框的代码 #

因为输入框是disabled状态，onChange事件不会被触发，所以可以移除这部分冗余代码：

<div className="row">
  <div className="col-md-6">
    <input
      disabled
      type="text"
      className="form-control"
      placeholder="Student First Name"
      value={firstName}
    />
  </div>
  <div className="col-md-6">
    <input
      disabled
      type="text"
      className="form-control"
      placeholder="Student Last Name"
      value={lastName}
    />
  </div>
</div>

3. 修复API控制器的小bug #

你的API控制器中存在语法错误，console.log(err).res.send会抛出错误（console.log()返回undefined，无法链式调用res.send），需修改为：

export const studentID = (req, res) => {
  db.query(
    "SELECT userID, firstName, lastName  FROM userIndex WHERE role = 'student' ORDER BY firstName ASC;",
    (err, rows) => {
      if (!err) {
        res.send(rows);
      } else {
        console.log(err);
        res.send({ alert: err });
      }
    }
  );
};

调整完成后，下拉框选择学生时，对应的firstName和lastName会自动填充到禁用输入框中，同时userID状态也会正确更新。

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