Привязка компонента React к экземпляру Handontable - PullRequest
Новая
       5

Привязка компонента React к экземпляру Handontable

0 голосов
/ 25 июня 2018

После того, как react-handsontable был обновлён до версии 1.0.0, я не совсем уверен, как связать компонент React с экземпляром Handsontable, поскольку Handsontable теперь является зависимой точкой и больше не является частью оболочки React.и поэтому он больше не доступен по ссылке.

В документах react-handsontable показано, как визуализировать компонент Handsontable: 

render() {
  return (
    <div id="hot-app">
      <HotTable data={this.data} colHeaders={true} rowHeaders={true} width="600" height="300" stretchH="all" />
    </div>
  );
}

и справка Handsontable Core APIпоказывает, как вызывать его методы: 

var ht = new Handsontable(document.getElementById('example1'), options);

Итак, я попытался добавить идентификатор в компонент React и создать новый экземпляр Handsontable, который ссылается на этот элемент, но он просто завершает рендеринг другой таблицы: 

componentDidMount() {
  const hot = new Handsontable(document.getElementById('hot'));
  // hot.countCols();
}

render() {
  return (
    <React.Fragment>
      <HotTable id="hot" settings={...} />
    </React.Fragment>
  );
}

Как использовать методы Core API с визуализированным компонентом?Я также поднял проблему в попытке улучшить документы.

1 Ответ

0 голосов
/ 25 июня 2018

Оказывается, что HotTable имеет hotInstance - экземпляр Handsontable - и вам все еще нужно добавить ссылку на ваш компонент для доступа к нему.Поэтому, следуя моему предыдущему примеру, он должен выглядеть примерно так: 

constructor(props) {
  super(props);
  this.hotRef = React.createRef();
}

componentDidMount() {
  const hotInstance = this.hotRef.current.hotInstance;
  // hotInstance.countCols();
}

render() {
  return (
    <React.Fragment>
      <HotTable ref={this.hotRef} settings={...} />
    </React.Fragment>
  );
}

Альтернативой React.createRef() является callback refs .

...