Reactjs는

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

:

이에게 기회를 줘