Javascript 单击“不将事件侦听器绑定到窗口”时的“反应”按钮_Javascript_Reactjs_Webpack_Babeljs

Javascript 单击“不将事件侦听器绑定到窗口”时的“反应”按钮

javascript reactjs webpack

Javascript 单击“不将事件侦听器绑定到窗口”时的“反应”按钮,javascript,reactjs,webpack,babeljs,Javascript,Reactjs,Webpack,Babeljs,将onClick事件附加到按钮时出现一些问题。单击“渲染”按钮无效，检查DOM会显示页面上没有事件侦听器。我不确定我做错了什么，但我很确定这与我的环境是如何用webpack和babel设置的有关。问题是，我真的不知道如何开始排除故障（复制粘贴到文件中并渲染它不起作用，但它在codepen项目上起作用）下面是代码，以防万一 import React from 'react'; class Root extends React.Component { constructor(){

将onClick事件附加到按钮时出现一些问题。单击“渲染”按钮无效，检查DOM会显示页面上没有事件侦听器。我不确定我做错了什么，但我很确定这与我的环境是如何用webpack和babel设置的有关。问题是，我真的不知道如何开始排除故障

（复制粘贴到文件中并渲染它不起作用，但它在codepen项目上起作用）

下面是代码，以防万一

import React from 'react';

class Root extends React.Component {
    constructor(){
        super()
        this.test = this.test.bind(this);
    }
    test(){
        console.log('test');
    }
    render() {
        return (
            <html>
                <head>
                    <title>Keep In Touch</title>
                    <link rel="stylesheet" href="css/semantic.min.css" type="text/css" />
                    <link rel="stylesheet" href="css/style.css" type="text/css" />
                </head>
                <body>
                    <button className='ui primary button' onClick={this.test}>click me</button>
                </body>
            </html>
        );
    }
}

从“React”导入React；
类根扩展了React.Component{
构造函数（）{
超级（）
this.test=this.test.bind（this）；
}
测试（）{
console.log（'test'）；
}
render（）{
返回(
保持联络
点击我
);
}
}

我觉得奇怪的是，在react组件中定义了

html

、

head

和

body

标记。这通常是不必要的，我怀疑您的问题是由于没有在这个（子？）页面中加载React造成的。但是，如果不知道这是如何设置的（我假设它在您能够看到按钮的情况下工作），我无法确定。这是github回购协议-这会有帮助吗？我不知道你在子页面中“加载反应”是什么意思。这是我整个项目的第一个事件处理程序，因此完全可能。仔细看了一下，我想这可能是罪魁祸首？使用res.send（renderToString（））要真正呈现JSXYeah，我是个白痴。谢谢你让我走上了正确的道路。通过添加

index.html

文件并使用

Root.js

作为我的应用程序入口点，修复了此问题。非常感谢在这种情况下，将解决方案更正式地写出来作为答案并自己接受通常是有用的。这将有助于任何其他人谁有相同的问题，遇到这在以后的日期。再看看您的回购协议，似乎问题至少部分是由服务器端渲染引起的（这就是为什么我感到困惑，因为我以前没有做过任何这样的事情），所以在问题中提到标签或答案也会对未来的访问者有所帮助。