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

Posted 2023-02-22

【中文标题】ReactJS组件中的简单javascript不起作用[重复]

【英文标题】：Simple javascript in ReactJS component not working [duplicate]

【发布时间】：2021-01-16 10:12:39

【问题描述】：

这是我的组件：

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;

启动时它会多次运行该功能，但是当它被加载并且我点击导航时它就不起作用了。

【问题讨论】：

请不要上传images of code。它们不能被复制来重现问题，它们不能被未来的读者搜索，它们比文本更难阅读。请以文本形式发布实际代码以创建minimal reproducible example。

使用 onClick = () => this.test()

更好：onClick=this.test

【参考方案1】：

您可以在 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  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;

【讨论】：

没有解释的答案没有那么有用。

我正在编辑它。

【参考方案2】：

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

---

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

【参考方案3】：

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

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

【讨论】：

这个答案很好，但我不建议使用()=>this.test()，因为它不必要地向调用堆栈添加了另一个函数。在 JS 中的函数是first-class objects。