基于NextUI组件的React可编辑表格输入无法输入问题排查

你的问题核心在于Input组件的name属性与绑定的字段不匹配，导致状态更新逻辑无法正确作用到对应的输入框上，具体分析和修复如下：

问题原因 #

所有Input的name属性都被设置为"name"，但第二列输入框绑定的是position字段、第三列绑定的是email字段。当触发onChange时，onChangeInput函数只会更新数据项中的name字段，而输入框的value对应的是position或email，这两个字段的状态没有被修改，因此输入框内容始终保持初始值，无法输入。

修复步骤 #

给每个Input设置与绑定字段一致的name属性：

• 姓名列Input：name="name"（原本正确，无需修改）
• 职位列Input：name="position"
• 邮箱列Input：name="email"

修复后的完整代码 #

import { useState } from 'react'
import { Table } from "@nextui-org/react";
import { Input } 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 ? { ...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="employee name"
                                    name="name"
                                    value={name}
                                    type="text"
                                    onChange={(e) => onChangeInput(e, employeeId)}
                                />
                            </Table.Cell>
                            <Table.Cell>
                                <Input
                                    aria-label="employee position"
                                    name="position"
                                    value={position}
                                    type="text"
                                    onChange={(e) => onChangeInput(e, employeeId)}
                                />
                            </Table.Cell>
                            <Table.Cell>
                                <Input
                                    aria-label="employee email"
                                    name="email"
                                    value={email}
                                    type="text"
                                    onChange={(e) => onChangeInput(e, employeeId)}
                                />
                            </Table.Cell>
                        </Table.Row>
                    ))}
                </Table.Body>
            </Table>
        </div>
    )
}

export default EditableTable

另外，我还简化了onChangeInput中的判断逻辑（去掉了冗余的&& name判断，因为name来自输入框必然存在），不影响功能但代码更简洁。

内容的提问来源于stack exchange，提问作者Marc Rochat