为什么我的 history.push 按钮 onClick 处理程序代码不起作用？

Question

我只使用 React.js 一个月左右，我希望有人能指出我的错误，以便我了解更多。

我创建了一个可重复使用的按钮组件，但在测试过程中，虽然按钮显示正确并且我可以正确更改值 - onClick 功能不起作用。现在，我正在尝试获取将 onClick 重定向到第一条路径的按钮。

下面我添加了我的代码的相关区域，希望有人能提供帮助。

显示组件：

import Sidebar from '../../Components/SideNav/Sidebar'
import GenButton from '../../Components/Buttons/GenButton'

export default function Sales({ authorized }) {

let history = useHistory(); 

const handleRoute = () =>{
    history.push("/")
}

if (!authorized) {
    return <Redirect to='/' />
}

return (
    <div>
        <Sidebar />
        <div className='content'>
            <h2>Sales Page</h2>
            <GenButton 
                value="Home"
                onClick={handleRoute}
            />
        
        </div>
    </div>
)
}

GenButton 代码：

import React from 'react'
import './GenButton.css';

const GenButton = ({value, onClick}) => {
return <button className='btn' onClick={() => onClick}>
{value}
</button>

}

export default GenButton

我需要更多地了解为什么这不起作用，因为我需要创建的多个组件将有 2-4 个按钮需要路由到其他页面或事件。

感谢您的帮助。

Answer 1

因为 onClick 是 Gen Button 组件中的一个函数，所以您需要将其作为函数调用。

import React from 'react'
import './GenButton.css';

const GenButton = ({value, onClick = () => {}}) => {
return <button className='btn' onClick={() => onClick()}>
{value}
</button>

或者只是

import React from 'react'
import './GenButton.css';

const GenButton = ({value, onClick = () => {}}) => {
return <button className='btn' onClick={onClick}>
{value}
</button>

我也为 onClick 添加了默认值，以防特定按钮上没有默认值。

为什么我的 history.push 按钮 onClick 处理程序代码不起作用？

Why won't my history.push code for Button onClick handler work?

onclick

reactjs

react-router-dom