header.component.tsx(14， 15)：未提供'e'参数

Question

在我的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>
)
}
}

实际上，当route发生变化时，我正在尝试调用toggle函数。请给我建议做一些改变我的功能是有效的。但是"；至"；没有加载任何页面提前谢谢。

Answer 1

您需要这样做：

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

并且从componentDidMount中去除this.toggle();则是无用的