ReactJS组件中的简单javascript不工作[重复]

Question

这是我的组件：

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;

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

Answer 1

您可以在此处了解有关React中事件的更多信息。话虽如此，以下几点应该是可行的。您每次渲染组件时都会调用该函数，但您希望仅在单击时调用该函数。要做到这一点，您只需传递随后将被激发的处理程序/方法。

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;

Answer 2

将其更改为onClick={this.test}或onClick={（）=

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

Answer 3

您需要使用onClick={this.test（）}，而不是onClick={this.test}。正如您所看到的，它立即调用函数，并在onClick侦听器中保持未定义状态。通过按原样传递函数，可以确保在单击元素时正确调用该函数。

而onClick={（）=