React中如何避免同名、共用onChange函数的输入框值自动联动变化

所有输入框共用了同一个grade状态变量，全部输入框的value都绑定了这个值，任意输入框修改都会更新全局的grade，自然所有输入框都会同步变化。

将状态改为数组/对象结构，每个学生的成绩独立存储，修改时仅更新对应学生的成绩字段即可。
参考代码如下：

import React, { useState } from "react";

export default function App() {
  // 用对象存储对应学生id的成绩，key为学生id，value为成绩
  const [grades, setGrades] = useState({});

  let arr = [1, 2, 3, 4, 5, 6];

  // 接收学生id作为参数，更新对应id的成绩
  const handleChange = (e, studentId) => {
    e.preventDefault();
    setGrades(prev => ({
      ...prev,
      [studentId]: e.target.value
    }));
  };

  return (
    <div className="App">
      {arr.map((studentId) => (
        <input
          key={studentId}
          // 取当前学生id对应的成绩，不存在则为空
          value={grades[studentId] || ""}
          // 绑定时传入当前学生id
          onChange={(e) => handleChange(e, studentId)}
          placeholder="Enter Grade"
        />
      ))}
    </div>
  );
}

• 将单一值的grade状态改为对象类型的grades，独立存储每个学生的成绩
• onChange绑定时传入当前学生的唯一标识，更新状态时仅修改对应标识下的成绩值
• 每个输入框的value取值改为当前学生对应的值，互不干扰

内容的提问来源于stack exchange，提问作者Md Rezaul Karim