因此，我正在构建这个用户数据库，其中我有ID、名称、电子邮件、评论以及React boostrap表中每个单元格中的2个删除和编辑按钮。
我想在“名称”、“电子邮件”和“注解”单元格上单击“编辑”按钮时设置输入标记，我可以做到这一点，但问题是每次单击“编辑按钮”时，它都会在所有单元格上设置输入，而不是我单击的特定单元格。
我的JSX代码

return (
    <>
        <Table bordered hover>
            <thead>
            <tr className="text-center">
                <th>ID</th>
                <th>Name</th>
                <th>Email</th>
                <th>Comment</th>
                <th>Action</th>
            </tr>
            </thead>

            <tbody>
            {
                modifiedData.map((item, index) => {
                    return (
                        <Fragment key={item.id}>
                            <tr>
                                <td>{item.id}</td>
                                <td>{editRow ? <Form.Control type="text" placeholder={item.name}/> : item.name}</td>
                                <td>{editRow ? <Form.Control type="text" placeholder={item.email}/> : item.email}</td>
                                <td>{editRow ? <Form.Control as="textarea" placeholder={item.comment}/> : item.comment}</td>
                                <td className="d-flex justify-content-md-evenly">
                                    {
                                        !editRow &&
                                        <Button
                                            style={{width: "75px"}}
                                            variant="danger"
                                            type="submit" onClick={() => Delete(index)}
                                        >
                                            Delete
                                        </Button>
                                    }
                                    {
                                        editRow ? <EditableCell/> : // I want this function to only run on the specific index, to change the "Name", "Email", and "Comment" areas to inputTags but on the specific cell without affecting the rest of the cells
                                            <Button
                                                style={{width: "75px"}}
                                                className="ms-1"
                                                variant="secondary"
                                                onClick={() => Edit(item.id)}>
                                                Edit
                                            </Button>
                                    }
                                </td>
                            </tr>

                        </Fragment>
                    )
                })
            }
            </tbody>

        </Table>
    </>
)

单击“编辑”按钮后调用的可编辑输入标记

function EditableCell() {
    return (
        <>
            <Button
                style={{width: "75px"}}
                variant="secondary"
            >
                Save
            </Button>
            <Button
                style={{width: "75px"}}
                variant="warning"
                onClick={cancelUpdate}
            >
                Cancel
            </Button>
        </>
    )
}

我的编辑功能

function Edit(itemID) {

    setEditRow(true)

}

我的挂钩变量

const [grid, setGrid] = useState([])
const [editRow, setEditRow] = useState(false)

我不得不修改从API中获得的数据

const modifiedData = grid.map(({body, ...item}) => ({
    ...item,
    key: item.id,
    comment: body
}))