React + jQuery -> 按钮 onClick 不起作用

Question

Using ReactJS and jQuery I am adding buttons dynamically to specific div id's in my component like so:

$('id_name').html('<button>..text..</button>);

However, each of these buttons needs to have onClick functionality, and that is where my problem is.

The code that I need help with is this:

export default React.createClass({

        ....

    for(var i = 0; i<this.state.cells.length; i++){
          var id = '#'+this.state.cells[i];
          var mb = $(id).text();
          if(mb.length==0){
            $(id).html("<div id='"+ id +"' class='time-slot'> \
                            <button onClick="+this.buttonActivated()+"> \
                                <span id='message-"+id+"'>Not Assigned</span> \
                            </button> \
                       </div>");
          }
    }

         ....

    buttonActivated: function(){
        console.log("Button Clicked");
    },

         ....

});

What is actually happening is that when this page renders the function is run automatically for every button that is rendered, so I am getting 15 console logs saying "Button Clicked", but when I click any of the buttons the function is not triggered.

Answer 1

You should not insert DOM element into another DOM element like this in React. You should render it via JSX and also remove the parentheses from the function. in your constructor, add :

this.buttonActivated = this.buttonActivated.bind(this)

in your if statement do:

if(mb.length==0){
            $(id).html(<div id={idAsAParam} className="time-slot"> 
                      <button onClick={this.buttonActivated}> 
                           <span id={"message-"+idAsAParam}>Not Assigned</span> 
                      </button>
                </div>);
          }

This is only a pseudo suggestion to insert html/element into another DOM object. I would suggest doing the insertion via a state change within the render function of your component.

This way react will be aware of the click event to listen to.