如何使用 NextUI 表格组件构建可编辑的 React 表格答案

【问题标题】：How to build an editable React table with NextUI table component如何使用 NextUI 表格组件构建可编辑的 React 表格
【发布时间】：2022-11-17 22:06:34
【问题描述】：

我已经使用 NextUI 表组件构建了一个表，虽然我已经在输入元素上定义了 onChange，但无法在其中输入值。

我尝试了各种元素，如果我用标准 HTML 表格替换 NextUI 表格，这个 React 组件可以正常工作。

这是一个 React 组件的代码，它应该返回一个基于 NextUI 表格组件的可编辑表格。这个组件的代码有什么问题？

import { useState } from 'react'
//import './index.css'
import { Table, Row, Col, Tooltip, User, Text } from "@nextui-org/react";
import { Input, Spacer } from "@nextui-org/react";

const data = [
    {
        employeeId: '01',
        name: 'John Doe',
        email: 'johndoe@email.com',
        position: 'Frontend Developer',
    },
    {
        employeeId: '02',
        name: 'Sara',
        email: 'sara@email.com',
        position: 'HR Executive',
    },
    {
        employeeId: '03',
        name: 'Mike',
        email: 'mike@email.com',
        position: 'Backend Developer',
    },
]

const EditableTable = () => {
    const [employeeData, setEmployeeData] = useState(data)

    const onChangeInput = (e, employeeId) => {
        const { name, value } = e.target

        const editData = employeeData.map((item) =>
            item.employeeId === employeeId && name ? { ...item, [name]: value } : item
        )

        setEmployeeData(editData)
    }

    return (
        <div className="container">


            <h1 className="title">ReactJS Editable Table with NextUI Table</h1>
            <Table
                aria-label="Example table with static content"
                css={{
                    height: "auto",
                    minWidth: "100%",
                }}
            >
                <Table.Header>
                    <Table.Column>NAME</Table.Column>
                    <Table.Column>ROLE</Table.Column>
                    <Table.Column>STATUS</Table.Column>
                </Table.Header>
                <Table.Body>
                    {employeeData.map(({ employeeId, name, email, position }) => (
                        <Table.Row key={employeeId}>
                            <Table.Cell>
                                <Input
                                    aria-label="test"
                                    name="name"
                                    value={name}
                                    type="text"
                                    onChange={(e) => onChangeInput(e, employeeId)}

                                />
                            </Table.Cell>
                            <Table.Cell>
                                <Input
                                    aria-label="test"
                                    name="name"
                                    value={position}
                                    type="text"
                                    onChange={(e) => onChangeInput(e, employeeId)}
                                />
                            </Table.Cell>
                            <Table.Cell>
                                <Input
                                    aria-label="test"
                                    name="name"
                                    value={email}
                                    type="text"
                                    onChange={(e) => onChangeInput(e, employeeId)}

                                />

                            </Table.Cell>
                        </Table.Row>
                    ))}
                </Table.Body>
            </Table>



        </div>
    )
}

export default EditableTable

【问题讨论】：

标签： javascript reactjs react-table nextui

【解决方案1】：

事实上，问题似乎是由于没有将焦点放在输入元素上。

我设法通过创建自定义输入组件来解决此问题，在该组件中我使用 onClick 事件处理焦点。这是此组件的代码：

import React from "react";
import { Input } from "@nextui-org/react";


class TextInput extends React.Component {
 constructor(props) {
  super(props);
  this.textInput = React.createRef();
  this.focusTextInput = this.focusTextInput.bind(this);
}

focusTextInput() {
 this.textInput.current.focus();
}

render() {
 return (
   <div>
    <Input
      type="text"
      ref={this.textInput}
      onClick={this.focusTextInput}
      size="xs"
      aria-label="Default msg"
    />
  </div>
  );
 }
}
export default TextInput;

然后只需将此组件导入到使用 NextUI 表格组件的代码中，并将其用作表格单元格的输入。

【讨论】：