Question

尝试在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;

nav.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

Home.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

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

Answer 1

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

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

您还想对closeNav()

做同样的事情

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

Answer 2

呈现onClick函数时使用它。请这样修复。

class Nav extends Component {
    openNav(e) {
         e.preventDefault();
         document.getElementById("mySidenav").style.width = "360px";
    }
    closeNav(e) {
         e.preventDefault();
         document.getElementById("mySidenav").style.width = "0";
    }
    render() {
       //...
      <a href="javascript:void(0)" className="closebtn" onClick={this.closeNav}>&times;</a>
       //...
      <span className="button-area" onClick={this.openNav}>&#43;</span>
       //...
    }

TypeError：无法读取React中未定义的属性'preventDefault'

2 个答案: