Question

我正在构建一个包含固定列的表，我的方法是克隆表并将其置于绝对位置的顶部位置，仅显示已修复的列。

我正在使用jQuery来克隆，添加类，并将其附加到我的DOM。

我的表格标题有一个按钮并且有了克隆功能，我希望点击监听器能够在克隆上运行。

以下是问题示例的jsfiddle链接。

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

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

任何想法/解决方案都会非常有帮助。如果我不能走这条路线，我想我将不得不再用一个造型类来创建同一个表。

感谢您的帮助！

Answer 1

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

如果您需要克隆并且正在使用反应，那么最好找到一种反应方式。

如果没有jQuery（JSFiddle），这应该基本上做同样的事情：

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"))

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

1 个答案: