Handsontable не рендерится правильно? - PullRequest
Новая
       6

Handsontable не рендерится правильно?

0 голосов
/ 27 февраля 2019

Я использовал React Handsontable для добавления нескольких строк, 

import { HotTable } from '@handsontable/react';
import 'handsontable-pro/dist/handsontable.full.css';

При рендеринге я загружал hotTable в панель начальной загрузки свертывания 

<div className="panel-group" id="accordion">
<div className="panel panel-default">
  <div className="panel-heading">
    <h4 className="panel-title">
      <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Collapsible Group 1</a>
    </h4>
  </div>
  <div id="collapse1" className="panel-collapse collapse in">
    <div className="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
  </div>
</div>
<div className="panel panel-default">
  <div className="panel-heading">
    <h4 className="panel-title">
      <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Collapsible Group 2</a>
    </h4>
  </div>
  <div id="collapse2" className="panel-collapse collapse">
    <div className="panel-body">
          <div className="page-content">
               <div className="">
                  <div id="hot-app">
                    <HotTable root="hot" ref="hot" settings={this.state.settings} strechH="all" />
                  </div>
                </div>
            </div>

    </div>
  </div>
</div>

Всостояние я поддерживаю настройки handsontable 

this.state = {
  settings: {
            colHeaders:['Job Title', 'Name', 'Telephone','Fax','Handphone' , 'Email'],
            data: [{title:"", contactName:"", telephone: "", fax: "", handphone: "",  email: ""}],

           columns: [

                { data:"title"},
                { data: "contactName"},
                { data: "telephone"},
                { data:"fax"},
                { data:"handphone"},
                { data:"email"},

             ],

            minSpareRows: 1,
            contextMenu: true,
            rowHeaders:true,
            manualColumnResize: true,
            columnSorting: true,
            manualRowResize: true,
            manualRowMove: true,  
            manualColumnMove: true,
            colWidths: [150, 150, 100,150, 150, 150],


          },
}

Initially I am not able to render only one box is coming on click of that its working Fine.

After clicking on picture1 box then i am getting properly

ПустьЯ знаю, изначально по компоненту рендеринга, почему он не приходит, ДОЛЖЕН ли я сделать что-либо до того, как столкнулся с этой проблемой, я не могу решить эту проблему, Если я использую отдельно с handsontable, это нормально работает, Любой Пожалуйста, помогите мне в рендеринге.

Заранее спасибо

1 Ответ

0 голосов
/ 13 марта 2019

Довольно распространенная проблема, когда компонент отображается в контейнере display: none;, но расчеты его размеров основаны на стилях / видимости.

Использование обратного вызова из Bootstrap или другого события (например, MutationObserver) для обновленияHandsontable, когда он снова виден.Angular (да, я знаю) пример, чтобы показать идею: https://jsfiddle.net/xfzqtw3p/1/

...