Question

我因反应而陷入打嗝。我之前已经使用过它，但这次无法弄清楚什么是错的。我想在一个锚点上放一个onClick监听器，但它无法正常工作。为了更加精确，事件监听器根本没有捆绑。当我在元素上使用react开发工具时，它根本不会注册它们是一个事件监听器，更不用说要触发的所需函数了。有什么想法吗？

这里代码：

import React from 'react';


class OpeningDisplay extends React.Component {
    constructor(props) {
        super(props)
        this.onClickHandler = this.onClickHandler.bind(this)
    }

    onClickHandler(){
        console.log("hey")
    }

    render() {
        return (
            <div id="opening-display">
                <div id="options">
                    <a href='#' className="row" id="webpages-option" onClick={this.onClickHandler}>
                        <div className="option col text-center btn-lg">
                            Webpages
                        </div>
                    </a>
                    <a href='#' className="row" id="codepens-option">
                        <div className="option col text-center btn-lg">
                            Codepens
                        </div>
                    </a>
                </div>
            </div>
        )
    }
}

export default OpeningDisplay;

我使用webpack捆绑代码，所以这里是我的配置文件（如有必要）：

const path = require('path')


module.exports = {
    // webpack folder's entry js -excluded from jekyll's build process
      entry: './webpack/entry.js',
      output: {
        //put the generated file in the assets folder so jekyll will grab it
        path: path.resolve('src', './portassets'),
        filename: 'bundle.js'
      },
      module: {
        loaders: [
          {
            test: /\.jsx?$/,
            exclude: /(node_modules)/,
            loader: 'babel-loader', // 'babel-loader' is also a legal name to reference
            query: {
                presets: ['es2015','react']
            }
          },
          {
            test: /\.js?$/,
            exclude: /(node_modules)/,
            loader: 'babel-loader', // 'babel-loader' is also a legal name to reference
            query: {
                presets: ['es2015', 'react']
            }
          },
          {
            test: /\.(jpe?g|png|gif|svg)$/i, 
            use: [
              {
                loader: "file-loader",
                options: {
                    name: "[name].[ext]",
                    publicPath: '/',
                    outputPath: 'portassets/images/'
                }
              }
            ]
          }
        ]
    }
};

如果需要任何其他信息，请询问。

所以我是反应装置的新手，但是从我所看到的情况来看，当选择一个元素时，所有的属性都会显示出来，包括像＃34; onClick＆＃34;但是我的onClick没有显示出来。知道了什么？

修改所以我将存储库推送到github和＆＃34; onCLick = {blahblah}＆＃34;没有被推到存储库。它可能是我的文本编辑器吗？还是其他一些神秘的东西？

编辑2 所以我检查了我的git存储库，它看起来像这样：

import React from 'react';


class OpeningDisplay extends React.Component {
    render() {
        return (
            <div id="opening-display">
                <div id="options">
                    <a href='#' className="row" id="webpages-option">
                        <div className="option col text-center btn-lg">
                            Webpages
                        </div>
                    </a>
                    <a href='#' className="row" id="codepens-option">
                        <div className="option col text-center btn-lg">
                            Codepens
                        </div>
                    </a>
                </div>
            </div>
        )
    }
}

export default OpeningDisplay;

我做了一点改动，git跟踪了这个改变，让我再做一次提交。但是这个改变仍然没有出现在远程存储库中......

React onClick属性不存在

0 个答案: