Question

使用ReactJS和jQuery我会动态地将按钮添加到我的组件中的特定div id：

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

但是，每个按钮都需要具有onClick功能，这就是我的问题所在。

我需要帮助的代码是：

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");
    },

         ....

});

实际发生的情况是，当此页面呈现时，每个呈现的按钮都会自动运行该功能，因此我收到15个控制台日志，说“＆＃34; Button Clicked＆＃34;”但是当我点击任何一个按钮功能未被触发。

Answer 1

你不应该在React中将DOM元素插入到这样的另一个DOM元素中。您应该通过JSX渲染它，并从函数中删除括号。在您的构造函数中，添加：

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

if语句中的

执行：

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

这只是将html / element插入另一个DOM对象的伪建议。我建议通过组件的render函数中的状态更改来进行插入。

这样，react会知道要收听的click事件。

React + jQuery - ＆gt;按钮onClick不起作用

1 个答案: