Handsontable＆阵营

Question

我开始有反应，并试图建立handsontable在我的反应程序如下： 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> 
    ); 
    } 
} 

工作这么远，但我如何才能表的实例像纯JavaScript

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


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

谢谢，蒂姆

Answer 1

这是很简单的写你自己的反应包装为handsontable，然后您可以创建对您的HOT实例的引用。下面是一些样本反应，组件代码：

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

你有你的数据在构造函数中定义的数组。

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

您可以简单地将该数据链接到组件内的状态和setState。它应该是非常简单的。

this.state = { 
    table: [[first line], [second line]] 
} 

最终将进一步您可以编写自己的方法更新阵列的特定值。

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

如果你不想使用状态，并使用类似终极版你把逻辑的减速和动作触发器。你就在那里！

当然是你如何检查是否正确地操作您的阵列，很多图书馆可以来帮助（lodash和CO。）

Answer 3

如果你想访问核心的方法，如“setDataAtCell（）”，你可以用裁判来访问它们。

例如，将“ref ='xyz'”属性添加到HTML元素，然后可以用“this.refs.xyz”调用它。我修改了下面的例子来说明。它增加了一个按钮，onClick运行一个函数'setDataAtCell'。

// 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 

这种方法可以用来访问等，其可用于获得可被保存到状态或类似的表中的数据的快照“的getData（）”的其他方法。所以它比“ht”更长，你可以使用“this.refs.hot.hotInstance”来获得类似的效果。

您可以在React文档中阅读关于“Refs and the DOM”中ref属性的更多信息。