Question

我已经声明了单元格验证函数，但在单元格属性中却没有被调用，也没有抛出错误

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

调用它

关于使用handontable with react的一些建议也很棒！

以下是我的代码

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应用于每个单元格，或仅仅是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
     });

具有Handsontable单元格验证功能的Reactjs未调用

1 个答案: