在 react.js 中使用 onClick答案

【问题标题】：Using onClick in react.js在 react.js 中使用 onClick
【发布时间】：2017-05-16 09:18:00
【问题描述】：

我想在每次点击按钮时添加评论，这里是我的addComment函数

addComment: function(text){
            console.log('adding');
            var arr = this.state.comments;
            arr.push(text);
            this.setState({comments:arr});
            },

还有我的render

render: function(){
        return(
        <div>
            <button onCLick={this.addComment.bind(null,'new')} className="button-info create">Add new</button>
            <div className="board">{
            this.state.comments.map(this.eachComment)}
            </div>
        </div>
        );
        }

完整代码在这里：https://ghostbin.com/paste/895eb

问题是我的控制台中没有显示错误，当我单击按钮时，什么也没有发生。

谁能帮我找出错误？

【问题讨论】：

错字，用onClick，而不是onCLick，用bind(this, 'new')，这样写：<button onClick={this.addComment.bind(this,'new')} className="button-info create">Add new</button>
我已经看了 40 分钟，没有看到错字。谢谢你 Mayank。

标签： javascript reactjs button onclick

【解决方案1】：

这应该对您有所帮助。我认为我使用 onCLick 而不是 onclick 的问题 https://facebook.github.io/react/docs/handling-events.html

【讨论】：

【解决方案2】：

应该是 onClick 而不是 onCLick。

<button onClick={this.addComment.bind(null,'new')} className="button-info create">Add new</button>

这里是解决方案：https://jsfiddle.net/jayesh24/td1v0kh4/

【讨论】：

【解决方案3】：

您不需要绑定 (this) 或任何功能，而是尝试使用箭头函数 (ECMA SCRIPT arrow function) 来处理 (_this, _self, _that , ...)

addComment(text){
            console.log('adding');
            var arr = this.state.comments;
            arr.push(text);
            this.setState({comments:arr});
}

        <div>
            <button onCLick={() => addComment('new')} className="button-info create">Add new</button>
            <div className="board">{
            this.state.comments.map(this.eachComment)}
            </div>
        </div>

【讨论】：