未调用Reactjs With Handsontable cell验证函数

我在cells属性中声明了CellValidation函数，但没有调用它，也没有抛出错误

我已将函数定义声明为成员函数，并尝试从componentDidMount函数调用它

另外，关于使用react的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;

从“React”导入React；
从“Handsontable/dist/Handsontable”导入Handsontable；
让热={}；
让列=[]；
让数据=“”；
类扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
数据：[
{年份：“2016”，姓名：“John”，年龄：23岁，联系人：8000142880}，
{年份：“2015年”，姓名：“能源部”，年龄：22岁，联系人：9494858568}，
{年份：“2013”，姓名：“杰克”，年龄：21岁，联系人：78789825}，
{年份：“2012”，姓名：“乔”，年龄：20岁，联系人：98984526}，
]
}
列=[
{数据：'year'，键入：'text'}，
{data:'name'，type:'text'}，
{数据：'age'，类型：'numeric'}，
{数据：'contact'，类型：'numeric'}
]
}
getData=（）=>{
var datafromtable=document.getElementById（'foo'）；
//console.log（datafromtable）；
data=hot.getData（）；
控制台日志（数据）；
}
negativeValueRenderer=（）=>（实例、td、行、列、属性、值、单元格属性）=>{
log（'arguments'）；
//Handsontable.renderers.textrender.apply（这是参数）；
//返回；
}
componentDidMount（）{
var container=document.getElementById（'foo'）；
hot=新的可手持设备（容器、{
数据：this.state.data，
minSpareCols:1，
会议记录：1，
明科尔斯：5，
麻雀：5，
行标题：对，
colHeaders:['Year'，'Name'，'Age'，'Contact']，
列：列，
单元格：函数（行、列、属性）{
console.log（this）；
this.renderer=this.negativeValueRenderer；//未被触发
},
上下文菜单：true
});
}   
render（）{
返回(
获取数据
{data}
);
}
}
导出默认电子表格；

您是要将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
     });

构造函数（道具）{
超级（道具）；
this.negativeValueRenderer=this.negativeValueRenderer.bind（this）；
}
...
negativeValueRenderer（实例、td、行、列、属性、值、单元格属性）{
renderers.numericrender.apply（这是参数）；
if（parseInt（值，10）<0）{
td.style.color='红色'；
}
}
...
hot=新的可手持设备（容器、{
数据：this.state.data，
minSpareCols:1，
会议记录：1，
明科尔斯：5，
麻雀：5，
行标题：对，
colHeaders:['Year'，'Name'，'Age'，'Contact']，
列：列，
纵队={[
{
数据：“年”，
},
{
数据：“名称”，
},
{
数据：“年龄”，
validator:this.negativeValueValidator，
},
{
数据：“联系人”，
},
上下文菜单：true
});

您是要将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
     });

构造函数（道具）{
超级（道具）；
this.negativeValueRenderer=this.negativeValueRenderer.bind（this）；
}
...
negativeValueRenderer（实例、td、行、列、属性、值、单元格属性）{
renderers.numericrender.apply（这是参数）；
if（parseInt（值，10）<0）{
td.style.color='红色'；
}
}
...
hot=新的可手持设备（容器、{
数据：this.state.data，
minSpareCols:1，
会议记录：1，
明科尔斯：5，
麻雀：5，
行标题：对，
colHeaders:['Year'，'Name'，'Age'，'Contact']，
列：列，
纵队={[
{
数据：“年”，
},
{
数据：“名称”，
},
{
数据：“年龄”，
validator:this.negativeValueValidator，
},
{
数据：“联系人”，
},
上下文菜单：true
});