用Ag-grid访问状态

时间:2018-11-07 16:22:01

标签: ag-grid ag-grid-react

可能不是Ag-Grid问题,但我在这个问题上停留了一段时间。

具有这样的反应成分:

export default class Recrutement extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        candidats: [], // We suppose here that values are filled
        values: [] // We suppose here that values are filled
      };
      this.getContacts();
      this.getValues();
    }


    columnDefs = [{
        cellRenderer: function(params) {
          return '<span><i class="material-icons">&#xE5D3;</i></span>';
        },
        suppressMovable: true,
        width: 100,
        colId: 1,
        //width: (self.columnDefinitions.find(function (v) { return v.colId === 1 }) || {}).size || 50,
        pinned: 'left',
        suppressFilter: true
      },
      {
        width: 100,
        headerName: "Formation",
        editable: true,
        colId: 7,
        suppressMovable: true,
        //width : (self.columnDefinitions.find(function (v) { return v.colId === 7 }) || {}).size || null,
        autoHeight: true,
        cellEditor: 'agSelectCellEditor',
        valueGetter: function(params) {
          if (params.data.candidat.formationId === null)
            return "";
          return this.state.values.formations.find(function(val) {
            return val.id === params.data.candidat.formationId;
          }).name;
        },
        valueSetter: function(params) {
          return selectValueSetter(this.state.values.formations, true, 'formationId', params);
        },
        cellEditorParams: function() {
          return {
            values: this.state.values.formations
              .sort(function(a, b) {
                if (a.name < b.name) return -1;
                if (a.name > b.name) return 1;
                return 0;
              })
              .map(function(v) {
                return v.name;
              })
          };
        },
        filter: "anyOfWordsFilter"
      },
    ];
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

我想要的是例如valueGetter可以访问this.state。但是在这里,我每次都得到:

  

未捕获的TypeError:无法读取未定义的属性“状态”

我尝试了绑定系统(或者也许我做错了,可能是:D),但是箭头1却没有用。

在这种情况下如何访问状态?要使用Ag-grid,我需要保持阵列像这样(功能可以更改)

1 个答案:

答案 0 :(得分:1)

替换

valueSetter: function(params) {
      return selectValueSetter(this.state.values.formations, true, 'formationId', params);
},

作者

valueSetter: (params) => {
      return selectValueSetter(this.state.values.formations, true, 'formationId', params);
},

,请准备好this postthis one