React中如何在子组件中修改父组件的状态变量？附UserProfile和ChangePassword组件实现代码

你好呀！这个问题是React里非常常见的子组件触发父组件状态更新的场景，核心思路是利用React的单向数据流特性——父组件把状态更新的回调函数通过props传给子组件，让子组件调用这个函数来修改父组件的状态。下面给你一步步实现：

首先修正你的MainProfile父组件，把状态更新函数包装成回调，通过props传递给两个子组件：

import * as React from "react";
import List from "@mui/material/List";
import ListItem from "@mui/material/ListItem";
import ListItemText from "@mui/material/ListItemText";
import ListItemAvatar from "@mui/material/ListItemAvatar";
import Avatar from "@mui/material/Avatar";
import Box from "@mui/material/Box";
import AccountCircleIcon from "@mui/icons-material/AccountCircle";
import Typography from "@mui/material/Typography";
import HomeIcon from "@mui/icons-material/Home";
import CakeIcon from "@mui/icons-material/Cake";
import Axios from "axios";
import { useState, useEffect, useContext } from "react";
import { LoginContext, UserContext } from "../../../Helper/UserContext";
import { Button } from "@mui/material";
import UserProfile from "./Profile";
import ChangePassword from "./ChangePassword"; // 注意：你之前重复导入了Profile组件，这里修正为ChangePassword

export default function MainProfile() {
  const { cookies } = useContext(LoginContext);
  const employee_id = cookies.emp_id;
  const [mainPageView, setMainPageView] = useState(true);

  return (
    <div>
      {/* 给UserProfile传回调：点击后切换到修改密码页面 */}
      {mainPageView && <UserProfile onSwitchToPassword={() => setMainPageView(false)} />}
      {/* 给ChangePassword传回调：点击后切换回用户资料页面 */}
      {!mainPageView && <ChangePassword onSwitchToProfile={() => setMainPageView(true)} />}
    </div>
  );
}

接下来是UserProfile组件的实现，接收父组件传来的回调函数，在按钮点击时触发：

import React from "react";
import { Button, Box, Typography } from "@mui/material";

export default function UserProfile({ onSwitchToPassword }) {
  return (
    <Box sx={{ padding: 3 }}>
      <Typography variant="h5" gutterBottom>用户资料</Typography>
      {/* 这里可以添加你的用户资料展示内容，比如头像、姓名、入职信息等 */}
      <Box sx={{ marginTop: 3 }}>
        <Button 
          variant="contained" 
          color="primary"
          onClick={onSwitchToPassword}
        >
          切换到修改密码
        </Button>
      </Box>
    </Box>
  );
}

然后是ChangePassword组件的实现，同样接收父组件的回调，点击按钮切换回资料页面：

import React from "react";
import { Button, Box, Typography, TextField } from "@mui/material";

export default function ChangePassword({ onSwitchToProfile }) {
  // 可以在这里添加密码修改的表单逻辑，比如校验、API调用等
  const handleSavePassword = () => {
    // 示例：执行密码修改的业务逻辑
    console.log("密码修改请求已发送");
  };

  return (
    <Box sx={{ padding: 3 }}>
      <Typography variant="h5" gutterBottom>修改密码</Typography>
      <TextField label="旧密码" type="password" sx={{ marginBottom: 2, display: 'block' }} />
      <TextField label="新密码" type="password" sx={{ marginBottom: 2, display: 'block' }} />
      <TextField label="确认新密码" type="password" sx={{ marginBottom: 2, display: 'block' }} />
      <Box sx={{ display: 'flex', gap: 2, marginTop: 3 }}>
        <Button 
          variant="contained" 
          color="primary"
          onClick={handleSavePassword}
        >
          保存密码
        </Button>
        <Button 
          variant="outlined" 
          onClick={onSwitchToProfile}
        >
          返回用户资料
        </Button>
      </Box>
    </Box>
  );
}

补充两个小提示：

• 要保证组件文件的路径正确，比如ChangePassword组件要放在对应的./ChangePassword.jsx（或.js）文件中；
• React的单向数据流设计，能让状态变化的路径更清晰，避免组件间的状态混乱，这是组件通信的标准方式哦。

备注：内容来源于stack exchange，提问作者azmuth