Javascript React中的jQuery克隆未将单击侦听器传递给克隆

我正在构建一个具有固定列的表，我的方法是克隆该表并将其放在绝对位置的顶部，只显示固定的列

我正在使用jQuery克隆、添加类并将其附加到DOM中

我的表标题有一个按钮，通过克隆，我希望单击侦听器处理克隆

下面是一个链接，以获取该问题的示例

 componentDidMount() {
    jQuery('.button').clone(true).appendTo('#container')
  }

  render() {
    return (
      <div id="container">
        <button 
          className="button" 
          onClick={() => alert('hi')}
         >
          say hi
        </button>
      </div>
    )
  }

componentDidMount（）{
jQuery（'.button'）.clone（true）.appendTo（'#container'））
}
render（）{
返回(
警报（'hi'）}
>
打招呼
)
}

任何想法/解决方案都会非常有用。如果我不能走这条路，我想我必须用一个样式类再次创建同一个表

---

谢谢你的帮助

将jQuery添加到React项目不是一个好主意。jQuery是一个直接的DOM操纵器，而React则从虚拟DOM工作，以便在必要时智能地更新DOM

如果您需要克隆并且正在使用react，那么最好找到一种react方法

在没有jQuery（）的情况下，这基本上应该做同样的事情：

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）
此.state={
克隆：[“第一个克隆”]
}
}
componentDidMount（）{
this.setState（{clone:[…this.state.clone，'new clone']}）
}
render（）{
返回(
{this.state.clone.map（（v，i）=>
警报（'hi'）}
>
打招呼
)}
)
}
}
ReactDOM.render（，document.querySelector（“#app”））

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
        clone: ['first clone']
    }
  }

  componentDidMount() {
    this.setState({ clone: [...this.state.clone, 'new clone'] })
  }

  render() {
    return (
      <div id="container">
        { this.state.clone.map((v, i) => 
          <button
            key={i}
            className="button" 
            onClick={() => alert('hi')}
          >
            say hi
          </button>
        )}
      </div>
    )
  }
}

ReactDOM.render(<App />, document.querySelector("#app"))