React + jQuery -> Button onClick 不起作用

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 个控制台日志说"按钮单击"，但是当我单击任何按钮时，函数不会触发。

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对象的伪建议。我建议通过在组件的渲染函数中进行状态更改来进行插入。

这样 react 将知道要侦听的点击事件。