React.js Blueprint 表格 JS API EditableName

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

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

EditableName组件允许在表头文本上点击进行编辑。

表格属性：

numRows : 用于设置行数。
renderColumnHeaderCell : 用于定义列组件中的表头。

EditableName属性：

className : 是传递给子元素的一组由空格分隔的类名。
index : 指定列的索引，是一个唯一标识符。
intent : 定义要应用于元素的颜色视觉意图。
name : 指定在文本框中显示的名称。
onCancel : 当取消编辑时触发的无参回调函数。
onChange : 当编辑时触发的无参回调函数。
onConfirm : 当确认编辑时触发的无参回调函数。

语法：

<EditableName> ... </EditableName>

先决条件：

介绍和安装 reactJS
ReactJS 蓝图表组件

创建 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 表格 JS API EditableName

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

我们正在创建一个名为sampleColumn的自定义函数，并通过Column组件的columnHeaderRenderer属性调用它，它返回ColumnHeaderCell组件。ColumnHeaderCell组件通过nameRenderer属性调用一个名为EditableNameComponent的自定义函数，它返回一个EditableName组件。

App.js

import React from 'react'
import '@blueprintjs/core/lib/css/blueprint.css'; 
import '@blueprintjs/table/lib/css/table.css'; 
import { Column, Table, ColumnHeaderCell, EditableName }  
    from "@blueprintjs/table"; 
  
function App() { 
  
    const sampleColumn = () => { 
        return <ColumnHeaderCell 
            nameRenderer={EditableNameComponent} 
        /> 
    }; 
  
    const EditableNameComponent = () => { 
        return <EditableName 
            name="Name"
  
        /> 
    }; 
  
    return ( 
        <div style={{ margin: 20 }}> 
            <h4> 
                ReactJS Blueprint Table JS API EditableName 
            </h4> 
            <Table numRows={5}> 
                <Column 
                    columnHeaderCellRenderer={sampleColumn} /> 
  
            </Table> 
        </div> 
    ); 
} 
  
export default App;

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

npm start

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

React.js Blueprint 表格 JS API EditableName

示例2： 在这个示例中，我们将两个Column组件添加到numRows={5}的Table组件中。这两个Column组件分别调用自定义函数sampleColumnOne和sampleColumnTwo，返回一个调用EditableNameComponentOne的ColumnHeaderCell组件。EditableNameComponentOne是一个自定义函数，返回一个包含intent、name和onChange属性的EditableName组件，其中onChange属性调用onChangeHandler函数，在alter中显示文本。

App.js

import React from 'react'
import '@blueprintjs/core/lib/css/blueprint.css'; 
import '@blueprintjs/table/lib/css/table.css'; 
import { Column, Table, ColumnHeaderCell, EditableName }  
    from "@blueprintjs/table"; 
  
function App() { 
  
    // sample column 1 
    const sampleColumnOne = () => { 
        return <ColumnHeaderCell 
            nameRenderer={EditableNameComponentOne} 
        /> 
    }; 
    // sample column 2 
    const sampleColumnTwo = () => { 
        return <ColumnHeaderCell 
        >Age</ColumnHeaderCell> 
    }; 
  
    // on change function 
    const onChangeHandler = () => { 
        alert('you are changing the name !') 
    } 
  
    const EditableNameComponentOne = () => { 
        return <EditableName 
            name="Name"
            onChange={onChangeHandler} 
            intent="danger"
        /> 
    }; 
  
  
    return ( 
        <div style={{ margin: 20 }}> 
            <h4>ReactJS Blueprint Table JS API EditableName</h4> 
            <Table numRows={5}> 
                <Column 
                    columnHeaderCellRenderer={sampleColumnOne} /> 
                <Column 
                    columnHeaderCellRenderer={sampleColumnTwo} /> 
  
            </Table> 
        </div> 
    ); 
} 
  
export default App;

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