1

这是我用于 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}
        />
4

1 回答 1

0

尝试Editors.AutoComplete代替DropDownEditorand DropDownFormatter。

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


   const TitleTypesEditor = <Editors.AutoComplete options={titleTypes}/>;
   const TitleTypesFormatter = <Editors.AutoComplete options={titleTypes}/>;
于 2018-05-26T10:56:54.457 回答