如何在服务器上点击按钮运行代码?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何在服务器上点击按钮运行代码?相关的知识,希望对你有一定的参考价值。

我有一个简单的Next.js应用,它的功能为 dummy.js 文件,如下所示。

class Dummy extends React.Component{

    static async getInitialProps(ctx){
        return { dummy : 'abc'};
    }

    displayHelloWorld(params) {
      console.log(params.dummy);
    }

    render() {
        return <button onClick={this.displayHelloWorld(this.props)}>Click Me!</button>
    }
}

export default Dummy;

我使用命令运行应用程序 npm run dev 而去 localhost:3000/dummy. 我正期待着 displayHelloWorld 功能,只有当我点击 点击我! 按钮,但它是在页面加载时被调用的。

我的目标是在服务器端调用和运行函数(点击按钮时)。我如何做到这一点?

答案

编写 <button onClick={this.foo(args)}>...</button> 渲染组件时实际触发该函数一次。

一个简单的解决方法是传递一个函数回调,如 onClick={()=>this.foo(args)}.

这将确保每次按下按钮时都会调用该函数。

另一答案

这是因为你在调用 this.displayHelloWorld() 直接在渲染函数中使用。你可以把它包在一个箭头函数里面。

return <button onClick={() => this.displayHelloWorld(this.props)}>Click Me!</button>

以上是关于如何在服务器上点击按钮运行代码?的主要内容,如果未能解决你的问题,请参考以下文章

WPF,用后台代码创建了几个按钮,在运行的时候点击这些按钮,如何在点击按钮事件中知道点击的是哪个按钮呢

使用导航控制器按下后退按钮后,如何防止先前的片段出现?

如何刷新片段上的列表视图

代码适用于与单个 html 文件不同的堆栈片段

从片段创建子意图

如何在recyclerview不同的项目点击上打开几个不同的片段?