Reactjsは、私は、セルの検証機能を宣言したが、細胞の性質ではなく、それが起動していないとエラーがまた</p> <p>を投げていないしている私は、メンバ関数として関数定義を宣言し、しようとしている

Question

を呼び出していませんcomponentDidMount関数から呼び出す

また、handsontableと反応を使用することに関するいくつかの提案も素晴らしいでしょう！

は以下

import React from 'react'; 
import Handsontable from 'handsontable/dist/handsontable'; 

let hot = {}; 
let columns = []; 
let data = ''; 
class SpreadSheet extends React.Component { 
    constructor(props){ 
     super(props); 
     this.state = { 
      data : [ 
         {year: "2016", name: 'John', age: 23, contact: 8000142880}, 
         {year: "2015", name: 'Doe', age: 22, contact: 9494858568}, 
         {year: "2013", name: 'Jack', age: 21, contact: 7878989825}, 
         {year: "2012", name: 'Joe', age: 20, contact: 9898454526}, 
        ] 
    } 
    columns = [ 
       { data: 'year', type: 'text' }, 
       { data: 'name', type: 'text' }, 
       { data: 'age', type: 'numeric' }, 
       { data: 'contact', type: 'numeric' } 
      ] 
    } 
    getData =() => { 
     var datafromtable = document.getElementById('foo'); 
     //console.log(datafromtable); 
     data = hot.getData(); 
     console.log(data); 
    } 
    negativeValueRenderer =() => (instance, td, row, col, prop, value, cellProperties) => { 
     console.log('arguments'); 
     //Handsontable.renderers.TextRenderer.apply(this, arguments); 
     //return; 
    } 
    componentDidMount() { 
     var container = document.getElementById('foo'); 
     hot = new Handsontable(container, { 
     data: this.state.data, 
     minSpareCols: 1 , 
     minSpareRows: 1, 
     minCols: 5, 
     minRows: 5, 
     rowHeaders: true, 
     colHeaders: ['Year','Name','Age','Contact'], 
     columns: columns, 
     cells: function (row, col, prop) { 
      console.log(this); 
       this.renderer = this.negativeValueRenderer;//not getting triggered 
      }, 
     contextMenu: true 
    }); 
    } 
    render() { 
    return (
     <div> 
     <div id="foo"></div> 
     <button onClick = {this.getData}>Get Data</button> 
     {data} 
     </div> 
    ); 
    } 
} 
export default SpreadSheet; 

Answer 1

あなたは、各セル、または単に年齢欄にnegativeValueRendererを適用しようとしている私のコードですか？

 constructor(props) { 
     super(props); 
     this.negativeValueRenderer = this.negativeValueRenderer.bind(this); 
     } 

    ... 

     negativeValueRenderer(instance, td, row, col, prop, value, cellProperties) { 
     renderers.NumericRenderer.apply(this, arguments); 

     if (parseInt(value, 10) < 0) { 
      td.style.color = 'red'; 
     } 
     } 

... 

hot = new Handsontable(container, { 
     data: this.state.data, 
     minSpareCols: 1 , 
     minSpareRows: 1, 
     minCols: 5, 
     minRows: 5, 
     rowHeaders: true, 
     colHeaders: ['Year','Name','Age','Contact'], 
     columns: columns, 
     columns={[ 
      { 
      data: 'year', 
      }, 
      { 
      data: 'name', 
      }, 
      { 
      data: 'age', 
      validator: this.negativeValueValidator, 
      }, 
      { 
      data: 'contact', 
      }, 
     contextMenu: true 
    }); 

：

この打撃を与えます