ReactJS中Button组件onClick触发多函数的问题求助

你的代码里<Button>的onClick事件处理存在两个关键问题：

• 错误嵌套箭头函数，导致history(-1)从未执行
• props.toggleHomeBTN仅为函数引用，未实际调用触发文本切换

修正步骤： #

1. 移除onClick内多余的嵌套箭头函数，直接调用navigate(-1)实现返回上一页
2. 调用props.toggleHomeBTN()触发父组件中按钮文本的切换逻辑

修正后的完整代码： #

import React from 'react';
import { Button } from '@mui/material';
import { useNavigate } from 'react-router-dom';

const Home = (props) => {
    const navigate = useNavigate(); // 变量名贴合React Router v6官方命名规范
    return (
        <div style={{ height: '100vh' }} className={`text-${props.mode} bg-${props.dmode}`}>
            <h1>{props.Name}</h1>
            <Button 
                variant="contained" 
                color="success" 
                onClick={() => {
                    navigate(-1); // 执行返回上一页操作
                    props.toggleHomeBTN(); // 触发按钮文本切换
                }}
            >
                {props.home}
            </Button>
        </div>
    )
}

export default Home;

补充说明： #

• React Router v6中useNavigate返回的函数建议命名为navigate，更符合官方惯例
• 需确保父组件已实现toggleHomeBTN函数，用来更新home props的值（完成从"Go Back"到"Home"的切换）
• 在根路由("/")点击按钮时，navigate(-1)会自动跳转至用户之前访问的路由，同时触发按钮文本切换

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