为 React-Data-Grid 编写自定义编辑器的问题

Question

从这里关于编写自定义编辑器的官方文档 - https://adazzle.github.io/react-data-grid/docs/examples/custom-editors

这里有一个使用自定义颜色选择器的示例 - https://codesandbox.io/s/l9ko3oqwym?from-embed

还有一些来自 React-Data-Grid-Addons 的现有编辑器 - https://github.com/adazzle/react-data-grid/tree/master/packages/react-data-grid-addons/src/editors

所以我尝试编写自己的自定义编辑器，它基本上是一个带有类别的下拉列表。

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';

class CustomDropdown extends Component {
  constructor(props){
    super(props);
    this.state = {
      val : props.value
    }
  }

  getInputNode = () => {
    return ReactDOM.findDOMNode(this);
  }

  onChange = evt => {
    this.setState( 
      { val : evt.target.value }, 
      () => this.props.onCommit() 
    );
  }

  getValue = () => {  
    let updated = {};
    return updated[ this.props.column.key ] = this.state.val;
  }

  getStyle = () => {
    return {
      width: '100%',
      height: '100%'
    }
  }

  disableStyle = () => {
    return {
      backgroundColor: '#A4A4A4',
      fontWeight: 600,
      color: '#FFF'
    }
  }

  createOptions = () => {
    let options = [];
    this.props.options.forEach( group => {
      options.push( <option key={group.category} style={this.disableStyle()} disabled>{group.category}</option> );
      group.child.forEach( opt => {
        options.push( <option key={opt.label} value={opt.value}>{opt.label}</option> )
      });
    });

    return options;    
  }

  render() {
    return (
      <select style={this.getStyle()} defaultValue={this.props.value} onBlur={this.props.onBlur} onChange={this.onChange} >
        {this.createOptions()}
      </select>
    );
  }
}

export default CustomDropdown;

以及生成选项的模拟数据

const mockList = [
  {
    category: 'Header A',
    child: [
      { label: 'Label 1-A', value: 'Label 1-A' },
      { label: 'Label 2-A', value: 'Label 2-A' },
      { label: 'Label 3-A', value: 'Label 3-A' }
    ]
  },
  {
    category: 'Header B',
    child: [
      { label: 'Label 1-B', value: 'Label 1-B' },
      { label: 'Label 2-B', value: 'Label 2-B' },
      { label: 'Label 3-B', value: 'Label 3-B' }
    ]
  },
  {
    category: 'Header C',
    child: [
      { label: 'Label 1-C', value: 'Label 1-C' },
      { label: 'Label 2-C', value: 'Label 2-C' },
      { label: 'Label 3-C', value: 'Label 3-C' }
    ]
  }
];

自定义下拉菜单在数据网格的列定义中被调用

const Cols = [
  {
    key: 'id',
    name: 'No',
    width: 60
  },
  {
    key: 'category',
    name: 'Category',
    width: 170,
    editor: <CustomDropdown options={mockList} />
  }
];

<ReactDataGrid
  columns={cols}
  /* And some other properties in here */
/>

我已准备好所有 UI 并正常工作，它在表格中显示良好。

但这里的问题是，它无法将数据更新到表中。我试图从下拉选项中选择值，但它不会更新单元格值。当我突出显示单元格并按 Enter 键时，希望在我按 Enter 键时打开选项，但整个应用程序都失败了。

这里需要一些帮助来指导我如何使自定义编辑器正常工作。我密切关注上面的示例，并确保我没有错过任何事情，但是编写类组件并不是我擅长的（我更喜欢钩子）所以我不确定我是否在 sn 中做错了什么-p 上面。

Answer 1

你需要改变getValue函数：

  getValue = () => {  
    return { category: this.state.val };
  }