Javascript 如何在不执行双击操作的情况下使react数据网格表格单元格可编辑并集中于单击按钮

我正在使用react数据网格列出我的数据

我想在点击按钮时添加一个新行，因此第一列（不一定是第一列，也可以是任何列）应该是可编辑的，并集中在创建上

我知道react数据网格在双击时具有可编辑单元格功能。但我希望在创建行时不单击此选项。若有任何方法可以在用户按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;

import React，{Component}来自'React'；
从“/FileMenuFormatter”导入FileMenuFormatter；
从“./NameFormatter”导入NameFormatter；
从“../../components/ListView/ListView”导入ListView；
从“../../helpers/fileviewer/fileutils”导入{getRow}；
常量列=[
{
关键字：“名称”，
姓名：'姓名'，
格式化程序：名称格式化程序，
可调整大小：正确，
可排序：正确
}, {
键：“已创建”，
名称：'创建日期'，
可调整大小：正确，
可排序：正确
}, {
关键字：“lastmodified”，
名称：“上次修改”，
可调整大小：正确，
可排序：正确
}, {
键：“文件大小”，
名称：'文件大小'，
可调整大小：正确，
可排序：正确
},
{
键：“菜单”，
名称：“”，
宽度：35，
格式化程序：FileMenuFormatter，
可拖动：错误
}
];
/**
*
*
*@class-mycop
*@extends{Component}
*/
类mycop扩展组件{
getList（）{
让行=[]；
for（让索引在此.props.dList中）{
如果（索引的类型！==“未定义”）{
设dir=this.props.dList[index]；
rows.push（getRow（“dir”，dir））
}
}
for（让索引在此.props.fList中）{
如果（索引的类型！==“未定义”）{
让file=this.props.fList[index]；
rows.push（getRow（“文件”，file））
}
}
var newRow=this.props.newRow；
if（Object.keys（newRow）.length！==0）{
rows.push（getRow（“dir”，newRow[0]）；
}
返回行
}
getRow（rowId）{
返回此.getList（）[rowId]；
}
render（）{
让rowListData=this.getRowList（）；
返回(
);
}
}
导出默认mycop；

---

有人知道如何做到这一点吗？

我已经解决了这个问题。解决办法就在这里

所以，只要点击一个按钮，我就调用了showActive（）函数，该函数负责使列（在我的例子中是第一个）完全像react数据网格一样可编辑

首先使列可编辑，ReactDataGrid以“可编辑”作为输入函数。允许检查此列是否可编辑。对我来说，我想让单元格只在创建新行时才可编辑

创建要插入为表中新行的新obj。像这样-

 let newRow = [
                    {
                        created: milliseconds,
                        absPath: this.props.dirSelectedPath,
                        modified: milliseconds,
                        size: 0,
                        filename: folderName,
                        type: "FILE_DIR",
                        allowEdit: true
                    }
                ];

下面是可编辑单元的列配置

const columns = [
    {
        key: 'name',
        name: 'Name',
        resizable: true,
        sortable: true,
        filterable: true,
        editable: function (rowData) {
            return rowData.allowEdit ? true : false;
        }
    }
];

现在您必须编写一个函数来显示高亮显示且处于活动状态的单元格。为此，我调用了与react数据网格调用相同的函数

获取网格的句柄

<ReactDataGrid showActive={this.showActive.bind(this)} rowsCount={this.getSize()} ref={node => this.grid = node} {...this.props } />

showActive() {
        let length = this.getSize(); // get the length of the grid i.e number of rows
        let obj = { idx: 0, rowIdx: length };
        let promise = new Promise(function (resolve, reject) {
            if (this.grid) {
                resolve("this worked!");
            }
        }.bind(this));

        promise.then(function () {
            this.grid.onSelect(obj);
            this.grid.setActive('Enter');
        }.bind(this), function () {
        });
    }

this.grid=node}{…this.props}/>
showActive（）{
让length=this.getSize（）；//获取网格的长度，即行数
设obj={idx:0，rowIdx:length}；
让承诺=新承诺（功能（解决、拒绝）{
if（此.grid）{
决心（“这成功了！”）；
}
}.约束（这个）；
promise.then（函数（）{
这个.grid.onSelect（obj）；
this.grid.setActive（'Enter'）；
}.bind（this），函数（）{
});
}

---

希望能有所帮助。

到目前为止你试过什么吗？像其他阅读资料一样，谷歌搜索stackoverflow上类似的问题？请告诉我们您已经尝试提供了什么见解。我已经在谷歌上搜索了它，并在Jquery中找到了解决方案。使用contenteditable可以使整行可编辑。这些是普通的html表格。我正在使用react数据网格，我只希望该单元格可编辑。所以没有帮助。在这里发布你的代码和CSS以及所有东西。其他人不会费心帮你的。你想使整列不可编辑还是只在特定行中的一个单元格？