我正在使用反应数据网格来列出我的数据。
我想在单击按钮时添加新行,因此第一列(不一定首先可以是任何列)应该是可编辑的并专注于创建。
我知道反应数据网格在双击时具有可编辑的单元格功能。但我希望在没有任何点击的情况下创建行。如果有任何方法可以在用户按 Enter 后禁用编辑,那就太好了。
生成列表的代码:
import React, { Component } from 'react';
import FileMenuFormatter from './filemenuformatter';
import NameFormatter from './nameformatter';
import ListView from '../../components/listview/listview';
import { getRow } from '../../helpers/fileviewer/fileutils';
const columns = [
{
key: 'name',
name: 'Name',
formatter: NameFormatter,
resizable: true,
sortable: true
}, {
key: 'created',
name: 'Created On',
resizable: true,
sortable: true
}, {
key: 'lastmodified',
name: 'Last Modified',
resizable: true,
sortable: true
}, {
key: 'filesize',
name: 'File Size',
resizable: true,
sortable: true
},
{
key: 'menu',
name: '',
width: 35,
formatter: FileMenuFormatter,
draggable: false
}
];
/**
*
*
* @class myComp
* @extends {Component}
*/
class myComp extends Component {
getList() {
let rows = [];
for (let index in this.props.dList) {
if (typeof index !== 'undefined') {
let dir = this.props.dList[index];
rows.push(getRow("dir", dir))
}
}
for (let index in this.props.fList) {
if (typeof index !== 'undefined') {
let file = this.props.fList[index];
rows.push(getRow("file", file))
}
}
var newRow = this.props.newRow;
if(Object.keys(newRow).length !== 0) {
rows.push(getRow("dir", newRow[0]));
}
return rows
}
getRow(rowId) {
return this.getList()[rowId];
}
render() {
let rowListData = this.getRowList();
return (
<div>
<ListView
columns={columns}
rows={rowListData}
minHeight={this.props.minHeight} />
</div>
);
}
}
export default myComp;
有人知道如何实现这一目标吗?