reactjs - header.component.tsx(14, 15):未提供“e”的参数
问题描述
在我的 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”没有加载任何页面。
提前致谢。
解决方案
你需要做这样的事情:
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
是无用的
推荐阅读
- python - 多层感知器 (MLP) Keras 张量流模型
- flutter - 从 webiew flutter 中获取 js 函数并返回数据
- python - 从 Python 队列中删除或编辑项目
- javascript - 使用过滤器和其他工具更新 JS/TS 中的模型
- sql-server - 具有相同联接表中的列的查找表
- python - mitmproxy:无法为使用 PEP 517 且无法直接安装的密码学构建轮子
- angular - 如何重新加载 Angular 页面以便更新会话变量?
- java - 国际化多帧java swing
- javascript - 来自谷歌工作表脚本的下拉列表,带有插入自由文本的选项
- python - 使用熊猫垂直合并熊猫数据框而不会丢失列名