如何在React子组件中通过下拉选择修改App.js的数据？

要实现子组件修改父组件的任务状态，核心是通过props传递修改函数，让子组件触发父组件的状态更新逻辑，具体步骤如下：

1. 在App组件中定义状态修改函数 #

在App里创建专门用于更新任务状态的函数，接收任务ID和新状态作为参数，通过setTasks生成新的任务数组（React要求不可直接修改原状态）：

function App() {
  const [tasks, setTasks] = useState(Tasks);

  // 新增：修改任务状态的函数
  const updateTaskStatus = (taskId, newStatus) => {
    setTasks(prevTasks => 
      prevTasks.map(task => 
        task.id === taskId ? {...task, status: Number(newStatus)} : task
      )
    );
  };

  return (
    <BrowserRouter>
      <div>
        <Header />
        <Switch>
          <Route path="/task/:id">
            {/* 传递修改函数作为props */}
            <TaskComponent Tasks={tasks} updateTaskStatus={updateTaskStatus} />
          </Route>
        </Switch>
      </div>
    </BrowserRouter>
  );
}

2. 改造TaskComponent组件 #

在子组件中，我们需要：

• 用状态临时存储当前选中的状态值（配合Save按钮提交）
• 绑定select的初始值和当前任务的状态
• 给select添加onChange事件更新临时状态
• 给Save按钮添加点击事件，调用父组件传过来的修改函数

修改后的TaskComponent代码：

import { useParams, useState } from 'react';

const TaskComponent = ({ Tasks, updateTaskStatus }) => {
  const { id } = useParams();
  const task = Tasks.find((task) => String(task.id) === id);
  // 用useState临时存选中的状态，初始值为当前任务的status
  const [selectedStatus, setSelectedStatus] = useState(task.status.toString());

  // 处理下拉框变化
  const handleStatusChange = (e) => {
    setSelectedStatus(e.target.value);
  };

  // 处理保存按钮点击
  const handleSave = () => {
    updateTaskStatus(id, selectedStatus);
    // 可选：保存后可以添加提示或跳转逻辑
  };

  return (
    <div className="wrapper">
        <label>Status</label>
        <select
          value={selectedStatus}
          onChange={handleStatusChange}
        >
          <option value="0">In queue</option>
          <option value="1">In progress</option>
          <option value="2">Completed</option>
        </select>
        <button onClick={handleSave}>Save</button>
    </div>
  );
};

关键说明 #

• 不可直接修改原状态：React要求状态是不可变的，所以我们用map生成新数组，找到对应任务后返回一个新对象（用扩展运算符...task复制原属性，再覆盖status）。
• 类型转换：下拉框的value是字符串类型，所以用Number(newStatus)转换成数字，和原数据的status类型保持一致。
• 临时状态的作用：因为有Save按钮，所以先把选中的状态存在子组件的临时状态里，点击保存再提交给父组件，避免每次选下拉框就触发父组件更新。

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