Reactjs с Handsontable функцией проверки ячеек не вызывается

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

Вы пытаетесь применить absolu teValueRenderer к каждой ячейке или только к столбцу Age?

Дайте этому шанс:

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