0

在我的 reactjs 组件中，我收到一个错误：

header.component.tsx(14, 15): An argument for 'e' was not provided.

实际上我应该发送什么参数？

这是组件：

import React, { LinkHTMLAttributes } from 'react';
import { LinkProps, NavLink} from "react-router-dom";

interface NaviState {
    show:boolean;
}

export class Header extends React.Component<React.LinkHTMLAttributes<any>, NaviState> {
    
    state:NaviState = {
        show:false
    }

    toggle = (e:React.MouseEvent):void =>{
        e.preventDefault();
        this.setState(prevState => ({show:!prevState.show}));
    }

    render() {
        return (
            <header>
               <h1><a className="hidden tantum-logo" href="">Welocome to Tantum website</a></h1>
               <div className={"screen " + (this.state.show ? "show":"")}></div>
               <nav className={"small " + (this.state.show ? "show" : "")}>
                   <a className="nav-icon hidden" onClick={this.toggle} href="#">tantum-Menu</a>
                   <ul>
                       <li><NavLink activeClassName="active" to="home" onClick={e => this.toggle(e)}>Home</NavLink></li>
                       <li><NavLink to="about-us" onClick={e => this.toggle(e)}>About us</NavLink></li>
                       <li><NavLink to="what-we-do" onClick={this.toggle}>What we do</NavLink></li>
                       <li><NavLink to="projects" onClick={this.toggle}>Projects</NavLink></li>
                       <li><NavLink to="contacts" onClick={this.toggle}>Contacts</NavLink></li>
                       <li><a href="#">download <span>browchure</span></a></li>
                   </ul>
               </nav>
            </header>
        )
    }
}

实际上我试图在更改toggle时调用该函数route。请指教。做一些改变我的功能。但是“to”没有加载任何页面。 提前致谢。

4

1 回答 1

0

你需要做这样的事情：

toggle(e: React.MouseEvent) {
    e.preventDefault();
    this.setState(prevState => ({ show: !prevState.show }));
    this.props.history.push('/about-us');
}

<li><NavLink to="about-us" onClick={e => this.toggle(e)}>About us</NavLink></li>

并把你的组件里面withRouter

this.toggle();并从中删除componentDidMount是无用的

于 2020-12-24T10:48:46.013 回答