Question

在关注此问题之前，我已经针对同样的问题在SO上做了很多其他解决方案，但无法找到解决此问题的答案。

我在尝试获取onClick属性以解除我的功能时遇到了麻烦，这是问题组件的一部分：

构造

constructor() {
        super();
        this.state = {
            submissionFormCount: 0
        }
        this.addToSubmissionFormCount = this.addToSubmissionFormCount.bind(this);
    }

渲染：

                <div className="row">
                    <div className="col s12 m12 l12">
                        <h5 onClick={this.addToSubmissionFormCount} style={beatSubmissionStyles.colorize}><span>(Plus) </span>add another beat</h5>
                    </div>
                </div>

clickHandler事件：

addToSubmissionFormCount() {
        alert('Here');
        this.setState({
            submissionFormCount: this.state.submissionFormCount++
        });
    }

我正在使用'react-dom / server'

从Express服务器渲染应用程序

以下是我渲染组件的方式：

exports.beatSubmission = (req, res) => {
    const appString = renderToString(<App type="beatSubmission"/>);
    res.send(beatSubmissionTemplate({
        body: appString
    }))
}

Answer 1

我无法看到代码有任何问题。但是，我唯一想到的是，如果您在某种函数中渲染<h5>，例如可能是映射和数组。如果是这样，您需要在返回之前在render函数中定义var self = this，然后使用self.addToSubmissionFormCount。

P.S。我不建议在<h5>代码

中使用onClick处理程序

Answer 2

将h5更改为锚标记。所以替换：

<h5 onClick={this.addToSubmissionFormCount} style={beatSubmissionStyles.colorize}><span>(Plus) </span>add another beat</h5>

使用：

<a onClick={this.addToSubmissionFormCount} style={beatSubmissionStyles.colorize}><span>(Plus) </span>add another beat</a>

您可以随后为自己想要的样式设置样式。例如，如果您想在悬停时没有光标，请添加cursor: none

Answer 3

你不应该改变反应的状态。

变化： this.state.submissionFormCount ++ 至： this.state.submissionFormCount + 1

Answer 4

我认为你只是在服务器端渲染你的反应组件。我认为这是因为您复制了以下代码：

exports.beatSubmission = (req, res) => {
    const appString = renderToString(<App type="beatSubmission"/>);
    res.send(beatSubmissionTemplate({
        body: appString
    }))
}

您将组件呈现为字符串，并将字符串作为静态HTML发送到前端。虽然这确实会为您提供正确的渲染标记，但它会产生非交互式应用。

要让点击处理程序工作，你还需要编译你的JS，并将其包含在前端，如下所示：

https://github.com/erikras/react-redux-universal-hot-example/blob/master/src/server.js#L76 renderToString(<Html assets={webpackIsomorphicTools.assets()} store={store}/>));

有几种方法可以做到这一点。您可以手动添加脚本文件，并在模板中为前端预先打包JS，也可以使用Webpack Isomorphic Tools。

我怀疑你读了一个反应教程，引导你走向同构（服务器/客户端渲染）路径。您可以在服务器，客户端或两者上运行响应。在两者上运行它需要一些工作，但会导致应用程序“感觉”更快。

onClick没有被称为ReactJS

4 个答案: