Handsontable＆Iは、以下の反応で始まり、私の反応アプリでhandsontableを設定しようとしている

Question

に反応： 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}) 
} 

あなたが状態を使用してのようなものを使用したくない場合はReduxのあなたが減速し、アクションでトリガのロジックを置きます。あなたはそこにいます！もちろん

はあなたが正しくあなたの配列を操作することを確認する方法あなた次第です、ライブラリの多くは助けるために来ることができる（lodashと共同。）

Answer 3

あなたは「setDataAtCell（）」のようなコアメソッドにアクセスしようとしている場合は、あなたがそれらにアクセスするために、参考文献を使用することができます。

たとえば、HTML要素に「ref = 'xyz'」属性を追加すると、「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"を使用することができます。

ref属性の詳細については、Reactのドキュメントの "Refs and the DOM"を参照してください。