React.js Blueprint Table JS API EditableCell

React.js Blueprint 是一个前端UI工具包。它非常优化和流行，用于构建复杂数据密集的桌面应用程序的界面。

表格组件允许用户显示数据行。我们可以在ReactJS中使用以下方法来使用ReactJS Blueprint表格组件。

可编辑单元格 组件在表格主体上启用双击编辑功能。

表格的属性：

numRows： 用于设置行数。
cellRenderer： 用于定义数据的显示方式，可以在每个列组件上设置。

可编辑单元格的属性：

columnIndex： 指定单元格的列索引。
interactive： 一个布尔值。确定是否启用鼠标交互。
isFocused： 一个布尔值。确定当前单元格是否聚焦。
key： 一个字符串对象。
cellRef： 外部div的引用句柄。
loading： 一个布尔值。确定是否处于加载状态。
onCancel： 一个无返回值的回调函数，当取消编辑时会触发。
onChange： 一个无返回值的回调函数，在编辑时触发。
onConfirm： 一个无返回值的回调函数，当确认编辑时触发。
onKeyDown： 当单元格聚焦并按下一个键时调用的回调函数。
onKeyPress： 当按下一个字符键时调用的回调函数。
onKeyUp： 当单元格聚焦并释放一个键时调用的回调函数。
rowIndex： 指定单元格的行索引。
style： 指定CSS样式。
tabIndex： 指定单元格的tab索引。
tooltip： 悬停时显示的元素。
truncated： 一个布尔值。确定单元格的内容是否会被包裹起来以防止溢出。
value： 在文本框中显示的值。
wrapText： 一个布尔值。确定单元格的内容是否会被包裹起来。

语法：

<EditableCell>...</EditableCell>

前提条件：

介绍和安装 reactJS
React.js蓝图表格组件

创建React应用程序并安装模块：

步骤1: 使用以下命令创建一个React应用程序：

npx create-react-app foldername

步骤2: 在创建项目文件夹即foldername之后，使用以下命令切换到该文件夹：

**cd foldername**

步骤3： 在创建完ReactJS应用程序后，使用以下命令安装所需模块：

npm install @blueprintjs/core
npm install --save @blueprintjs/table

项目结构： 看起来会像下面这样。

React.js Blueprint Table JS API EditableCell

示例1： 我们从“@blueprintjs/table”中导入{ Column，Table，EditableCell }。为了应用组件的默认样式，我们导入了“@blueprintjs/core/lib/css/blueprint.css”和“@blueprintjs/table/lib/css/table.css”。

我们使用表格组件以表格的形式显示数据，在这里，我们显示了一个名为“Enter Numbers”的表头及其下的一个列，我们传递了我们的自定义sampleData函数，该函数返回EditableCell组件，并且因为我们指定了numRows={5}，所以这个函数被调用了5次。

App.js

import React from 'react'
import '@blueprintjs/core/lib/css/blueprint.css'; 
import '@blueprintjs/table/lib/css/table.css'; 
import { Column, Table, EditableCell } from "@blueprintjs/table"; 
  
  
function App() { 
  
    const sampleData = () => { 
        return <EditableCell></EditableCell> 
    }; 
  
    return ( 
        <div style={{ margin: 20 }}> 
            <h4> 
                ReactJS Blueprint Table JS API EditableCell 
            </h4> 
            <Table numRows={5}> 
                <Column 
                    name=" Enter Numbers"
                    cellRenderer={sampleData} /> 
  
            </Table> 
        </div> 
    ); 
} 
  
export default App;

运行应用程序的步骤： 从项目的根目录使用以下命令运行应用程序：

npm start

输出: 现在打开您的浏览器并转到 http://localhost:3000/ ，您将看到以下输出:

React.js Blueprint Table JS API EditableCell

示例2: 在这个示例中，自定义的sampleData函数返回一个EditableCell组件，显示不同的值，并通过名为onConfirmHandler的onConfirm属性调用一个on-confirm函数，在我们确认了编辑的文本后，在弹出框中显示文本。

App.js

import React from 'react'
import '@blueprintjs/core/lib/css/blueprint.css'; 
import '@blueprintjs/table/lib/css/table.css'; 
import { Column, Table, EditableCell } from "@blueprintjs/table"; 
  
function App() { 
  
    const sampleData = (idx) => { 
        return <EditableCell 
            value={idx * 100 + 4 + idx} 
            placeholder="new data"
            onConfirm={onConfirmHandler} 
        ></EditableCell> 
    }; 
  
    // on confirm function 
    const onConfirmHandler = () => { 
        alert('number changed !') 
    } 
  
    return ( 
        <div style={{ margin: 20 }}> 
            <h4>ReactJS Blueprint Table JS API EditableCell</h4> 
            <Table numRows={5}> 
                <Column 
                    name=" Numbers"
                    cellRenderer={sampleData} /> 
  
            </Table> 
        </div> 
    ); 
} 
  
export default App;

执行应用程序的步骤： 从项目的根目录中使用以下命令运行应用程序：