在react.js中使用onClick

Question

I want to add a comment each time I click the button, here is my addComment fucntion

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

and my 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>
        );
        }

the whole code is here: https://ghostbin.com/paste/895eb

the problem is there is no error showing in my console and when I click the button, nothing happens.

Can anyone help me find the bug please?

Answer 1

This should help you. I think problem i you used onCLick instead of onclick https://facebook.github.io/react/docs/handling-events.html

Answer 2

you dont need to bind (this) or what ever to function , instead try to use arrow function ( ECMA SCRIPT arrow function ) which will handle (_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>

Answer 3

It should be onClick instead of onCLick.

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

Here is the solution: https://jsfiddle.net/jayesh24/td1v0kh4/