2 
import React, {Component} from 'react'
import ReactDataGrid from 'react-data-grid'
import update from 'immutability-helper'
import { Editors, Formatters } from 'react-data-grid-addons'

const {AutoComplete, AutoCompleteEditor, DropDownEditor} = Editors
const { DropDownFormatter } = Formatters
const productNames = [
  {
    id: 0,
    title: 'productName1',
  },
  {
    id: 1,
    title:'productName2'
  },
] 
const productNamesEditor = <AutoCompleteEditor options={productNames} />
const columns= [
  {
    key: 'id',
    name: 'ID',
  },
  {
    key: 'product_name',
    name: 'Product Name',
    editable: true,
    editor: productNamesEditor,
  },
  {
    key: 'product_qty',
    name: 'Product Qty',
    editable:true,
  },
  {
    key: 'product_rate',
    name: 'Product Rate',
    editable:true,
  },
  {
    key: 'product_disc',
    name: 'Product Disc',
    editable:true,
  },

]
class LineItems extends Component {
  constructor(props) {
    super(props)
    this._columns = columns
    console.log(this._columns)
    this.state = {rows: this.props.lineItems.rows}
  }


  rowGetter = (i) => {
    return this.state.rows[i];
  };

  handleGridRowsUpdated = ({ fromRow, toRow, updated }) => {
    console.log(fromRow)
    console.log(updated)
    // calling slice() without arguments makes a copy of array
    let rows = this.state.rows.slice();

    for (let i = fromRow; i <= toRow; i++) {
      let rowToUpdate = rows[i];
      let updatedRow = update(rowToUpdate, {$merge: updated});
      rows[i] = updatedRow;
      this.setState({ rows })
      this.props.onGridRowsUpdated(rows)


    }
  }
  render () {
    return (
      <ReactDataGrid
        ref={node => this.grid=node}
        enableCellSelect={true}
        columns={this._columns}
        rowGetter={this.rowGetter}
        rowsCount={this.state.rows.length}
        maxHeight={300}
        onGridRowsUpdated={this.handleGridRowsUpdated}

      />
    )
  }
}

export default LineItems

错误：元素类型无效：应为字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。

检查EditorContainer....的渲染方法

网格呈现。如果我尝试输入/编辑设置了 AutoCompleteEditor 的单元格，则会收到上述错误。

4

1 回答 1

2

我的代码中的小错误：

const {AutoComplete, AutoCompleteEditor, DropDownEditor} = Editors

本来应该

const {AutoComplete: AutoCompleteEditor, DropDownEditor} = Editors
于 2018-10-31T03:15:19.923 回答