jQuery клон в React не передает прослушиватели кликов клону

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 работает из Virtual 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"))