使用Basic DropDownEditor

Question

这是我用于react-data-grid的版本。在Chrome上运行应用。

"react": "^15.4.2",
"react-data-grid": "^2.0.8",
"react-data-grid-addons": "^2.0.17",

我正在复制主网站上的Build-In-Editors示例。网格本身按预期运行，但我在Chrome控制台中收到以下警告：

Warning: Failed prop type: Invalid prop `options[0]` supplied to `DropDownEditor`.
in DropDownEditor (created by HomePage)
in HomePage (created by RouterContext)
in div (created by App)
in App (created by RouterContext)
in RouterContext (created by Router)
in Router

Warning: Failed prop type: The prop `value` is marked as required in `DropDownFormatter`, but its value is `undefined`.
in DropDownFormatter (created by HomePage)
in HomePage (created by RouterContext)
in div (created by App)
in App (created by RouterContext)
in RouterContext (created by Router)
in Router

以下是设置React Data Grid组件代码的代码段：

进口：

import {Editors, Formatters} from 'react-data-grid-addons';
const { DropDownEditor } = Editors;
const { DropDownFormatter } = Formatters;

参数设置：

const titleTypes = [
        { id: 'bug', value: 'bug', text: 'Bug', title: 'Bug' },
        { id: 'improvement', value: 'improvement', text: 'Improvement', title: 'Improvement' },
        { id: 'epic', value: 'epic', text: 'Epic', title: 'Epic' },
        { id: 'story', value: 'story', text: 'Story', title: 'Story' }
    ];

    const TitleTypesEditor = <DropDownEditor options={titleTypes}/>;
    const TitleTypesFormatter = <DropDownFormatter options={titleTypes}/>;

    this.state = {
        columns: [{key: 'id', name: 'ID'}, {key: 'title', name: 'Title',
            editable: true, editor: TitleTypesEditor, formatter: TitleTypesFormatter}],
        rows: [{id:1, title: 'title1'}, {id:2, title: 'bug'}]
    };

渲染组件......

  <ReactDataGrid
            columns={this.state.columns}
            rowsCount={this.state.rows.length}
            rowHeight={50}
            minHeight={200}
            rowGetter={this.rowGetter}
            enableCellSelect={true}
            onGridRowsUpdated={this.handleGridRowsUpdated}
        />

Answer 1

尝试使用Editors.AutoComplete代替DropDownEditor和DropDownFormatter。

   import {Editors} from 'react-data-grid-addons';


   const TitleTypesEditor = <Editors.AutoComplete options={titleTypes}/>;
   const TitleTypesFormatter = <Editors.AutoComplete options={titleTypes}/>;