ReactJS组件中的简单JavaScript无法正常工作

如何解决ReactJS组件中的简单JavaScript无法正常工作

这是我的组件：

import React,{Component} from 'react';
import 'D:/School/Alta/interactiveweb/src/webapp/src/App.css'

class Chat extends Component {

  test() {
    alert();
  }

  render() {
    return <nav onClick={this.test()} className={"menu"} id={"Chat"}>
        <div className={"menu-itemContainer"}>
            <div className={"menu-item"}>
                <img alt={""} className={"chatPF"} src={require('./Images/defaultPF.png')}/>
                <a className={"chatname"}>Test</a>
                <a className={"chatlastuser"} id={"chatlastuser"}>
                    <font color={"orange"}>Bram: </font>wow wtf...
                </a>
                <a className={"chatlasttime"}>20:28</a>
            </div>
        </div>
    </nav>;
  }
}

export default Chat;

启动时，它将多次运行该功能，但是当它加载并单击导航时，它将无法正常工作。

解决方法

您需要使用onClick={this.test()}而不是onClick={this.test}。有了它，它立即调用了该函数，并且在onClick侦听器中未定义。通过按原样传递函数，可以确保单击元素时将正确调用该函数。

---

虽然onClick={()=>this.test()}可以工作，但是它会不必要地向调用堆栈中添加另一个函数，因为JavaScript函数中的first-class objects是这样。

,

将其更改为onClick={this.test}或onClick={()=>this.test()}。

您不想在属性中调用函数，而只想声明它们。点击事件发生时将调用它们。

,

您可以在React here中了解有关事件的更多信息。话虽如此，以下应该工作。您每次在组件渲染时都调用该函数，但是您只想在发生单击时调用它。为此，您只需传递将被触发的处理程序/方法。

import React,{Component} from 'react';
import 'D:/School/Alta/interactiveweb/src/webapp/src/App.css'

class Chat extends Component {
  test() {
    alert();
  }

  render() {
    return <nav onClick={this.test} className="menu" id="Chat">
        <div className="menu-itemContainer">
            <div className="menu-item">
                <img alt="" className="chatPF" src={require('./Images/defaultPF.png')}/>
                <a className="chatname">Test</a>
                <a className="chatlastuser" id="chatlastuser">
                    <font color="orange">Bram: </font>wow wtf...
                </a>
                <a className="chatlasttime">20:28</a>
            </div>
        </div>
    </nav>;
  }
}

export default Chat;