Erwartete onClick-Listener als Funktion, stattdessen wurde type string Unbekannte Ereignishandlereigenschaft onclick. Meintest du "onClick"?

Question

import React from 'react'; 
import './styles/index.css'; 
import ReactDOM from 'react-dom'; 
import AboutUs from './about.js'; 
import ContactForm from './contact.js'; 
import MainBody from './mainbody.js'; 
import Footer from './footer.js'; 



class Header extends React.Component 
{ 
    constructor(props) 
    { 
     super(props); 
     this.opengdMenu=this.opengdMenu.bind(this); 
     this.openDesktopAboutusForm=this.openDesktopAboutusForm.bind(this); 
     this.openDesktopContactForm=this.openDesktopContactForm.bind(this); 
     this.loadHomePage=this.loadHomePage.bind(this); 
     this.state={ 
      isMenuOpen:false   //state variable to change the state of menu from open to close and vice-versa. 
     }; 
    } 



    opengdMenu() 
    { 
      this.setState({isMenuOpen:!this.state.isMenuOpen}); 
      if(this.state.isMenuOpen===true) 
      { 
      var about_us = document.getElementById('about'); 
      about_us.setAttribute("style","display:none"); 
      } 

    } 
    openDesktopAboutusForm() 
    { 
     ReactDOM.render(<AboutUs />,document.getElementById('about')); 
    } 
    openDesktopContactForm() 
    { 
     ReactDOM.render(<ContactForm />,document.getElementById('about')); 
    } 
    loadHomePage() 
    { 
     this.render() 

     ReactDOM.render(<MainBody />, document.getElementById('mainbody')); 

     ReactDOM.render(<Footer />,document.getElementById('footer')); 

    } 
    render() 
    { 
     if(!this.state.isMenuOpen)  //this part will render the header with the menu closed. 
     { 
      return(
       <div> 
       <div className="row"> 

        <div className="gd_header_section body_fixed_content hidden-xs hidden-sm"> 
        <div className="gd_header_default_container" id="gd_header_default_container"> 
         <img className="gd_header_logo_icon" onClick={this.loadHomePage} src={require('./images/GD_Logo_white.png')} alt="gd logo_icon_ desktop" /> 
         <img className="gd_header_menu_icon" onClick={this.opengdMenu} src={require('./images/menu_icon.png')} alt="gd menu icon" /> 
         <div className="gd_header_login">LOGIN</div> 
        </div> 
        </div> 
       </div> 

       <div className="row"> 
        <div className="gd_small_header_section body_fixed_content visible-xs visible-sm"> 
        <div className="gd_small_header_default_container" id="gd_small_header_default_container"> 
         <img className="gd_small_header_logo_icon1" src={require('./images/GD_Logo_white.png')} alt="GD logo white" onClick={this.loadHomePage} /> 
         <img className="gd_small_header_menu_icon" src={require('./images/menu_icon.png')} alt="small menu icon" onClick={this.opengdMenu} /> 
        </div> 
       </div> 
       </div> 
      </div> 
      ); 
     } 
     else  //this part will render the header with the menu opened. 
     { 
      return(
     <div className="row"> 

       <div className=" col-md-12 col-xs-12 col-sm-12 gd_header_section body_fixed_content hidden-xs hidden-sm"> 
       <div className="gd_header_collapsed_container" id="gd_header_collapsed_container"> 
        <img className="gd_header_logo_icon" src={require('./images/GD_Logo_gray.png')} alt="gd gray logo" onClick={this.loadHomePage} /> 
        <img className="gd_header_menu_close_icon" src={require('./images/cross_icon.png')} alt="cross icon" onClick={this.opengdMenu} /> 
        <div className="godocto_header_menu_option_div" onClick={this.openDesktopAboutusForm}> 
        <span><a className="gd_header_menu_option"> ABOUT US </a></span> 
        </div> 
        <div className="godocto_header_menu_option_div" onClick={this.openDesktopContactForm}> 
        <span><a className="gd_header_menu_option">CONTACT US</a></span> 
        </div> 
       </div> 
       </div> 

      <div className="gd_small_header_collapsed_container col-xs-12 col-sm-12 col-md-12 visible-xs visible-sm" id="gd_small_header_collapsed_container"> 
       <div className="gd_small_header_collpased_menu_division"> 
        <img className="gd_small_header_logo_icon2" src={require('./images/GD_Logo_gray.png')} alt="gd small logo" onClick={this.loadHomePage} /> 
        <img className="gd_small_header_menu_close_icon" src={require('./images/cross_icon.png')} alt="gd small menu mobile" onClick={this.opengdMenu} /> 
       </div> 
       <div className="gd_small_header_menu_division"> 
        <div className="gd_small_header_menu_option_division" onClick="openSmallDesktopAboutusForm()"> 
        <span><a className="gd_small_header_menu_option">ABOUT US</a></span> 
        </div> 
        <div className="gd_small_header_menu_option_division" onClick="openSmallDesktopContactForm()"> 
        <span><a className="gd_small_header_menu_option">CONTACT US</a></span> 
        </div> 
       </div> 
      </div> 
     </div> 

); 
    } 
} 
} 



export default Header 

, wenn ich im Menü angeklickt dann fing es Fehler oder i klicken, ob über oder Kontakt gleiche Fehler in über uns kommen, und ich Kontaktkomponente Text einfach machen, aber Fehler wurde in Header-Komponente kommt

nur dort ist eine Zustandsgröße

Answer 1

Der Fehler, den Sie haben, auf diesem Teil ist:

<div className="gd_small_header_menu_division"> 
         <div className="gd_small_header_menu_option_division" onClick="openSmallDesktopAboutusForm()"> 
         <span><a className="gd_small_header_menu_option">ABOUT US</a></span> 
         </div> 
         <div className="gd_small_header_menu_option_division" onClick="openSmallDesktopContactForm()"> 
         <span><a className="gd_small_header_menu_option">CONTACT US</a></span> 
         </div> 
        </div> 

werfen Sie einen Blick auf diesen Teil onClick="openSmallDesktopAboutusForm()". Sie können es so schreiben onClick={openSmallDesktopAboutusForm()} wie Sie mit Ihren anderen Methoden gemacht haben.

Wie die Warnmeldung, können Sie nur ändern onclick auf Kapitälchen, mit onClick mit dem Kamel Fall.