React-bootstrap Table点击编辑按钮仅激活指定单元格输入框问题

你当前的问题根源在于用布尔值editRow控制所有行的编辑状态，导致点击任意Edit按钮时，所有行都会同步切换为输入框模式。要实现仅单行编辑，只需将editRow改为存储当前编辑行的ID，而非简单的布尔值，具体修改步骤如下：

1. 修改状态变量定义 #

将editRow的初始值从false改为null，用来存储当前正在编辑的行ID：

const [grid, setGrid] = useState([])
const [editRow, setEditRow] = useState(null) // 改为存储编辑行ID，初始为null

2. 更新Edit函数逻辑 #

点击Edit按钮时，将当前行的ID存入editRow，而非设置为true：

function Edit(itemID) {
    setEditRow(itemID) // 传入当前行的ID，标记该行进入编辑状态
}

3. 调整表格行的渲染判断 #

在表格行循环中，新增isEditing变量判断当前行是否处于编辑状态，替换原有的editRow布尔判断：

<tbody>
{
    modifiedData.map((item, index) => {
        const isEditing = item.id === editRow // 判断当前行是否为编辑行
        return (
            <Fragment key={item.id}>
                <tr>
                    <td>{item.id}</td>
                    {/* 仅当前编辑行显示输入框，添加defaultValue填充原有数据 */}
                    <td>{isEditing ? <Form.Control type="text" defaultValue={item.name}/> : item.name}</td>
                    <td>{isEditing ? <Form.Control type="text" defaultValue={item.email}/> : item.email}</td>
                    <td>{isEditing ? <Form.Control as="textarea" defaultValue={item.comment}/> : item.comment}</td>
                    <td className="d-flex justify-content-md-evenly">
                        {/* 非编辑状态的行显示Delete按钮 */}
                        {
                            !isEditing &&
                            <Button
                                style={{width: "75px"}}
                                variant="danger"
                                onClick={() => Delete(index)}
                            >
                                Delete
                            </Button>
                        }
                        {/* 当前编辑行显示Save/Cancel，非编辑行显示Edit */}
                        {
                            isEditing ? <EditableCell cancelUpdate={cancelUpdate}/> :
                                <Button
                                    style={{width: "75px"}}
                                    className="ms-1"
                                    variant="secondary"
                                    onClick={() => Edit(item.id)}>
                                    Edit
                                </Button>
                        }
                    </td>
                </tr>
            </Fragment>
        )
    })
}
</tbody>

4. 修改EditableCell组件 #

接收父组件传入的取消编辑回调，点击Cancel时触发：

function EditableCell({ cancelUpdate }) { // 接收父组件的回调函数
    return (
        <>
            <Button
                style={{width: "75px"}}
                variant="secondary"
            >
                Save
            </Button>
            <Button
                style={{width: "75px"}}
                variant="warning"
                onClick={cancelUpdate}
            >
                Cancel
            </Button>
        </>
    )
}

5. 实现取消编辑函数 #

在父组件中添加cancelUpdate函数，点击Cancel时清空当前编辑行的标记：

function cancelUpdate() {
    setEditRow(null) // 退出编辑状态，清空当前编辑行ID
}

内容的提问来源于stack exchange，提问作者Tombrown Anuma