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

Question

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

我尝试过各种元素，如果我用标准的NextUI表替换了HTML，那么这个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

Answer 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表组件的代码中导入该组件，并将其用作表单元格的输入。