Javascript 如何使用ReactJS调用函数内部的方法（单击a href以注销）

如何在渲染外部调用方法，并在函数内部调用方法，以便通过单击该函数注销用户

我发现了一个错误。

无法读取未定义的属性“AuthLogout”

我将向你们展示我在项目中已经制作的示例代码

这是我在渲染之外的方法：

AuthLogout() {
    localStorage.clear();
    window.location.href = "/Home";
}

function DriverHeader(){

const authorization_USERMAIL = localStorage.getItem('USERMAIL');
if(authorization_USERMAIL)
{
    return (
        <nav className="navbar navbar-expand-lg navbar-light bg-dark" style={{position:'fixed',width:'100%'}}>
            <div className="container-fluid">
                <a className="navbar-brand" href="#">
                    <img src={require('./Assets/logo.png')} alt="" style={{height:50,width:80}}/>
                </a>
                <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span className="navbar-toggler-icon"></span>
                </button>
                <div className="collapse navbar-collapse" id="navbarSupportedContent" >
                    <ul className="navbar-nav mr-auto" style={{fontSize:16}}>
                        <li className="nav-item active">
                            <Link to="/driver_dashboard" className="nav-link" style={{color:'white',fontWeight:'bold'}}>Dashboard</Link>
                        </li>
                        <li className="nav-item">
                            <a className="nav-link" href="#" style={{color:'white',fontWeight:300}}>About Us</a>
                        </li>

                        <li className="nav-item">
                            <a className="nav-link" href="#" tabIndex="-1" aria-disabled="true" style={{color:'white',fontWeight:300}}>Contact Us</a>
                        </li>
                    </ul>
                    <ul className="navbar-nav">

                            <li className="nav-item  dropdown">
                                <div className="row">
                                    <img src={require('./Assets/driver_image.jpg')} className="img-fluid" style={{height:50,width:50,borderRadius:'50%',color:'white'}} alt=""/>
                                    <a className="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style={{color:'white',marginTop:5,fontWeight:'bold'}}>{authorization_USERMAIL}</a>
                                    <div className="dropdown-menu" aria-labelledby="navbarDropdown">
                                        <a className="dropdown-item" href="#">Setting</a>
                                        <a className="dropdown-item" href="#" onClick={this.AuthLogout}>Logout</a>                                      
                                   </div>
                                </div>
                            </li>


                    </ul>
                </div>
            </div>
        </nav>
    )

}

render() {
    return (          
                <div>                
                     <Router>                          
                             <DriverHeader/>

                             <Routings/>

                             <Footer/>  
                     </Router>
                </div>
             );
}

这是我的功能：

AuthLogout() {
    localStorage.clear();
    window.location.href = "/Home";
}

function DriverHeader(){

const authorization_USERMAIL = localStorage.getItem('USERMAIL');
if(authorization_USERMAIL)
{
    return (
        <nav className="navbar navbar-expand-lg navbar-light bg-dark" style={{position:'fixed',width:'100%'}}>
            <div className="container-fluid">
                <a className="navbar-brand" href="#">
                    <img src={require('./Assets/logo.png')} alt="" style={{height:50,width:80}}/>
                </a>
                <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span className="navbar-toggler-icon"></span>
                </button>
                <div className="collapse navbar-collapse" id="navbarSupportedContent" >
                    <ul className="navbar-nav mr-auto" style={{fontSize:16}}>
                        <li className="nav-item active">
                            <Link to="/driver_dashboard" className="nav-link" style={{color:'white',fontWeight:'bold'}}>Dashboard</Link>
                        </li>
                        <li className="nav-item">
                            <a className="nav-link" href="#" style={{color:'white',fontWeight:300}}>About Us</a>
                        </li>

                        <li className="nav-item">
                            <a className="nav-link" href="#" tabIndex="-1" aria-disabled="true" style={{color:'white',fontWeight:300}}>Contact Us</a>
                        </li>
                    </ul>
                    <ul className="navbar-nav">

                            <li className="nav-item  dropdown">
                                <div className="row">
                                    <img src={require('./Assets/driver_image.jpg')} className="img-fluid" style={{height:50,width:50,borderRadius:'50%',color:'white'}} alt=""/>
                                    <a className="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style={{color:'white',marginTop:5,fontWeight:'bold'}}>{authorization_USERMAIL}</a>
                                    <div className="dropdown-menu" aria-labelledby="navbarDropdown">
                                        <a className="dropdown-item" href="#">Setting</a>
                                        <a className="dropdown-item" href="#" onClick={this.AuthLogout}>Logout</a>                                      
                                   </div>
                                </div>
                            </li>


                    </ul>
                </div>
            </div>
        </nav>
    )

}

render() {
    return (          
                <div>                
                     <Router>                          
                             <DriverHeader/>

                             <Routings/>

                             <Footer/>  
                     </Router>
                </div>
             );
}

function-DriverHeader（）{
const authorization_USERMAIL=localStorage.getItem（'USERMAIL'）；
if（授权\用户邮件）
{
返回(


仪表板










)
}

}

这是我的渲染：

AuthLogout() {
    localStorage.clear();
    window.location.href = "/Home";
}

function DriverHeader(){

const authorization_USERMAIL = localStorage.getItem('USERMAIL');
if(authorization_USERMAIL)
{
    return (
        <nav className="navbar navbar-expand-lg navbar-light bg-dark" style={{position:'fixed',width:'100%'}}>
            <div className="container-fluid">
                <a className="navbar-brand" href="#">
                    <img src={require('./Assets/logo.png')} alt="" style={{height:50,width:80}}/>
                </a>
                <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span className="navbar-toggler-icon"></span>
                </button>
                <div className="collapse navbar-collapse" id="navbarSupportedContent" >
                    <ul className="navbar-nav mr-auto" style={{fontSize:16}}>
                        <li className="nav-item active">
                            <Link to="/driver_dashboard" className="nav-link" style={{color:'white',fontWeight:'bold'}}>Dashboard</Link>
                        </li>
                        <li className="nav-item">
                            <a className="nav-link" href="#" style={{color:'white',fontWeight:300}}>About Us</a>
                        </li>

                        <li className="nav-item">
                            <a className="nav-link" href="#" tabIndex="-1" aria-disabled="true" style={{color:'white',fontWeight:300}}>Contact Us</a>
                        </li>
                    </ul>
                    <ul className="navbar-nav">

                            <li className="nav-item  dropdown">
                                <div className="row">
                                    <img src={require('./Assets/driver_image.jpg')} className="img-fluid" style={{height:50,width:50,borderRadius:'50%',color:'white'}} alt=""/>
                                    <a className="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style={{color:'white',marginTop:5,fontWeight:'bold'}}>{authorization_USERMAIL}</a>
                                    <div className="dropdown-menu" aria-labelledby="navbarDropdown">
                                        <a className="dropdown-item" href="#">Setting</a>
                                        <a className="dropdown-item" href="#" onClick={this.AuthLogout}>Logout</a>                                      
                                   </div>
                                </div>
                            </li>


                    </ul>
                </div>
            </div>
        </nav>
    )

}

render() {
    return (          
                <div>                
                     <Router>                          
                             <DriverHeader/>

                             <Routings/>

                             <Footer/>  
                     </Router>
                </div>
             );
}

render（）{
报税表（
);
}

我的控制台中出现错误：

---

在调用

AuthLogout（）

的地方，

这个

似乎没有定义。这是因为您忘记了将函数绑定到组件类。如果您有一个扩展

组件的类

，那么我们通常在构造函数中这样做：

constructor(props) {
    super(props);
    this.AuthLogout = this.AuthLogout.bind(this);
}

这里我假设

AuthLogout（）

也在同一个类中定义。或者，您可以将

AuthLogout（）

移动到任何类之外，直接调用它，而无需

this:

<a className="dropdown-item" href="#" onClick={AuthLogout}>Logout</a>

---

要解决我的问题，它必须是这样的

function AuthLogout() {
    localStorage.clear();
    window.location.href = "/Home";
}


<a className="dropdown-item" href="#" onClick={AuthLogout}>Logout</a>  

函数AuthLogout（）{
localStorage.clear（）；
window.location.href=“/Home”；
}

谢谢大家。

请仔细查看，这将真正有助于理解主要问题

使AuthLogout成为箭头函数

AuthLogout=()=> {
    localStorage.clear();
    window.location.href = "/Home";
}

或者在渲染时绑定AUthLogout，就像-

<a className="dropdown-item" href="#" onClick=onClick={this.AuthLogout .bind(this)}>Logout</a>  

哪一行导致了错误？我将更新我的帖子，并在我的控制台中显示错误，@code peedient我已经更新了我的帖子，谢谢您的代码中的哪一行引用了它？@code peedient这一行@开发哪个构造函数？我的意思是，构造函数在哪个类中？我想实际上需要在

DriveHeader

上绑定，该函数引用

this