Handsontable & React

Question

Ich fange mit reagieren und versuchen handsontable in meiner reagieren App folgenden einzurichten: react-handsontable

// import React... 
import React from 'react'; 
import ReactDOM from 'react-dom'; 

// ... Handsontable with its main dependencies... 
import moment from 'moment'; 
import numbro from 'numbro'; 
import pikaday from 'pikaday'; 
import Zeroclipboard from 'zeroclipboard'; 
import Handsontable from 'handsontable'; 

// ... and HotTable 
import HotTable from 'react-handsontable'; 

class ExampleComponent extends React.Component { 
    constructor(props) { 
    super(props); 
    this.handsontableData = [ 
     ["", "Ford", "Volvo", "Toyota", "Honda"], 
     ["2016", 10, 11, 12, 13], 
     ["2017", 20, 11, 14, 13], 
     ["2018", 30, 15, 12, 13] 
    ]; 
    } 

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

funktioniert so weit, aber wie bekomme ich die Instanz der Tabelle wie in reinem Javascript

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


ht.setDataAtCell(0, 0, 'new value'); 

Danke, Tim

Answer 1

Es ist ziemlich einfach Ihre eigenen reagieren Wrapper für handsontable zu schreiben, und dann können Sie einen Verweis auf Ihre HOT-Instanz erstellen. Hier einige Beispiel-React Komponentencode:

componentWillReceiveProps({ gridSpec }) { 

    if (gridSpec) { 
     const {columns, colHeaders, data} = gridSpec; 
     const container = document.getElementById(GRID_ID); 

     this.hotInstance = new handsontable(container, { 
      columns, 
      colHeaders, 
      data, 
      height: 600 
     }); 
    } 
} 

shouldComponentUpdate() { 

    return false; 
} 

render() { 
    return (
     <div style={{overflowX: 'hidden', height: '600px'}}> 
      <div id={GRID_ID} /> 
     </div> 
    ) 
} 

Answer 2

Sie haben Ihre Daten als Array im Konstruktor definiert.

this.handsonetableData = [[First row],[second row]] 

Sie könnten einfach verknüpfen, dass die Daten in einen Zustand und setState in Ihrer Komponente. Es sollte wirklich unkompliziert sein.

Schließlich können Sie Ihre eigene Methode schreiben, die einen bestimmten Wert dieses Arrays aktualisiert.

constructor (props) { 
    super(props) 
    this.state = { 
    table: [[first row], [second row]] 
    } 
} 
updateValueInTable (row, col, value) 
    checkIdontDoAnythingStupid() 
    let newTable = this.state.table 
    newTable[row][col] = value 
    this.setState({ table: newTable}) 
} 

Wenn Sie nicht wollen, um den Zustand zu verwenden und so etwas wie redux Sie setzen die Logik in der Reduzierung und die Auslöser in Aktionen. Und da bist du!

Natürlich ist bis zu Ihnen, wie Sie überprüfen, dass Sie die korrekte Schreibweise Ihrer Array manipulieren, kann eine Menge von Bibliotheken zu Hilfe kommen (lodash und co.)

Answer 3

Wenn Sie versuchen, die Kern Methoden zuzugreifen, wie ‚setDataAtCell()‘ können Sie Refs verwenden, um auf sie zuzugreifen.

Fügen Sie zum Beispiel das Attribut "ref = 'xyz'" zum HTML-Element hinzu und Sie können es dann mit "this.refs.xyz" aufrufen. Ich habe Ihr Beispiel unten zur Veranschaulichung geändert. Es fügt eine Schaltfläche hinzu, mit der onClick eine Funktion für 'setDataAtCell' ausführt.

// import React... 
import React from 'react'; 
import ReactDOM from 'react-dom'; 

// ... Handsontable with its main dependencies... 
import moment from 'moment'; 
import numbro from 'numbro'; 
import pikaday from 'pikaday'; 
import Zeroclipboard from 'zeroclipboard'; 
import Handsontable from 'handsontable'; 

// ... and HotTable 
import HotTable from 'react-handsontable'; 

class ExampleComponent extends React.Component { 
    constructor(props) { 
    super(props); 
    this.handsontableData = [ 
     ["", "Ford", "Volvo", "Toyota", "Honda"], 
     ["2016", 10, 11, 12, 13], 
     ["2017", 20, 11, 14, 13], 
     ["2018", 30, 15, 12, 13] 
    ]; 
    } 

    handleClick(e) { 
    this.refs.hot.hotInstance.setDataAtCell(0, 0, 'new value') 
    } 

    render() { 
    return (
     <div id="example-component"> 
     <HotTable root="hot" 
        data={this.handsontableData} 
        colHeaders={true} 
        rowHeaders={true} 
        width="600" 
        height="300" 
        stretchH="all" 
        ref="hot" 
     /> 
     <br/> 
     <button onClick={(e)=>this.handleClick(e)}>Click Me</button> 
     </div> 
    ); 
    } 
} 

export default ExampleComponent 

, kann dieses Verfahren wie „getData()“ für den Zugriff auf andere Methoden verwendet werden, die verwendet werden können, eine Momentaufnahme der Daten in der Tabelle zu erhalten, die in dem Zustand oder ähnlichem gespeichert werden. So ist es länger als "ht" können Sie "this.refs.hot.HotInstance" für ähnliche Auswirkungen verwenden.

Sie können mehr über das Attribut ref in "Refs and the DOM" in der React-Dokumentation lesen.