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

当我点击菜单然后它发现错误或我点击是否或联系相同的错误将来关于我们和联系组件我简单地渲染文本但错误是在标题组件

只有一个状态变量

Answer 1

您遇到的错误是：

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

看一下这部分onClick="openSmallDesktopAboutusForm()"。您可以像对待onClick={openSmallDesktopAboutusForm()}一样编写它，就像您使用其他方法所做的那样。

根据警告消息，您只需更改onclick小型大写字母，onClick使用驼峰大小写。

期望onClick侦听器是一个函数，而是获得类型字符串未知事件处理程序属性onclick。你的意思是“onClick”吗？

1 个答案: