时间戳

首页 > 解决方案 > TypeError：无法读取 React 中未定义的属性“preventDefault”

reactjs - TypeError：无法读取 React 中未定义的属性“preventDefault”

问题描述

尝试在 React 中运行 onClick 事件时，我不断收到各种错误。我得到了 (e)preventDefault() 的 TypeError 但如果我尝试在我的代码中消除这一行，它会引发关于下一行的错误。我显然错过了一些东西。谁能帮我确定问题可能是什么？对此，我真的非常感激。谢谢你。这是代码：app.js

import React, { Component } from 'react';
import './App.css';
import { HashRouter as Router, Route } from 'react-router-dom';

import Home from './pages/Home';
import Portfolio from './pages/Portfolio';
import Work from './pages/Work';
import Servicios from './pages/Servicios';
import Contacto from './pages/Contacto';
import Team from './pages/Team';
import Aviso from './pages/Aviso';


class App extends Component {
  render() {
    return (
      <Router basename="/"> 
        <div>
        <Route exact path='/' component={Home} />
        <Route exact path='/Portfolio' component={Portfolio} />
        <Route exact path='/Work' component={Work} />
        <Route exact path='/Servicios' component={Servicios} />
        <Route exact path='/Contacto' component={Contacto} />
        <Route exact path='/Team' component={Team} />
        <Route exact path='/Aviso' component={Aviso} />
        </div>
      </Router>
    );
  }
}

export default App;

导航.js

import React, { Component } from 'react';
import '../App.css';
import { NavLink } from 'react-router-dom';

const isActivefunc = (match, location) => {
    return match
}


class Nav extends Component {
    render() {
        function openNav(e) {
            e.preventDefault();
            document.getElementById("mySidenav").style.width = "360px";
        }
        function closeNav(e) {
            e.preventDefault();
            document.getElementById("mySidenav").style.width = "0";
        }
        return (
                <div id="mySidenav" className="sidenav">
                    <div className="menu-wrapper">
                        <a href="javascript:void(0)" className="closebtn" onClick={closeNav()}>&times;</a>
                        <NavLink exact to="/" activeClassName="active a-link">- <span className="big-cap">H</span>OME</NavLink>
                        <NavLink exact to="/Portfolio" activeClassName="active a-link">- <span className="big-cap">P</span>ORTFOLIO</NavLink>
                        <NavLink exact to="/Work" activeClassName="active a-link">- <span className="big-cap">H</span>OW <span className="big-cap">W</span>E <span className="big-cap">W</span>ORK</NavLink>
                        <NavLink exact to="/Servicios" activeClassName="active a-link">- <span className="big-cap">S</span>ERVICIOS</NavLink>
                        <NavLink exact to="/Contacto" activeClassName="active a-link">- <span className="big-cap">C</span>ONTACTO</NavLink>
                    </div>
                    <div className="sidebar-content">
                        <p>Suspendisse et magna eget diam ultrices elementum. Duis molestie suscipit dui, eu finibus lorem gravida sed. Vestibulum nec diam non nisl aliquet auctor in at nulla. Sed at gravida nisi, eu semper magna. Phasellus quam nisi, vestibulum a iaculis nec, molestie ut quam. Fusce lacus metus, viverra vitae hendrerit in, ultrices ac nibh. 
                        <br />Cras interdum magna et sem fermentum efficitur. Quisque vitae accumsan sapien. Donec et magna at risus tristique facilisis. Proin ornare diam et urna imperdiet eleifend.</p>
                    </div>
                    <div className="sidebar-content">
                        <div className="wrapper">
                            <NavLink exact to="/Team" activeClassName="active" className="team-button a-link-2">Nuestro equipo base</NavLink><br />
                                <NavLink exact to="/Aviso" activeClassName="active" className="aviso a-link-2">Aviso de Privacidad</NavLink>
                                <p className="copy">&copy;2019 RRspark</p>
                        </div>
                        <br />
                        <br />
                        <br />
                    </div>
                    <div className="colored-side">
                        <div className="link-holder">
                            <a href="#">EN</a>
                            <a href="#">ES</a>
                        </div>
                        <span className="button-area" onClick={openNav()}>&#43;</span>
                        <h3 className="colored-side-slogan">RRspark Stellar Web Studio</h3>
                    </div>
                </div>
        );
    }
}

export default Nav

主页.js

import React, { Component } from 'react';
import '../App.css';
import { Link } from 'react-router-dom';

import Nav from '../components/Nav';
import Main from '../components/Main';

class Home extends Component {
    render() {
        return (
            <div>
                <Nav />
                <Main />
                Body
            </div>
        );
    }
}

export default Home

错误信息

如果我缺少任何代码来帮助回答这个问题，请告诉我。预先感谢您的帮助。干杯。

标签： reactjs

解决方案

问题是您正在openNav()立即调用render. 相反，您想像这样传递对函数的引用。很像事件侦听器/事件处理程序的关系。

 <span className="button-area" onClick={this.openNav}>&#43;</span>

你也想做同样的事情closeNav()

 <a href="javascript:void(0)" className="closebtn" onClick={this.closeNav}>&times;</a>

推荐阅读