反应编辑 Table

Question

我正在尝试编辑单行但编辑所有行，同时还在尝试添加将填充某些行的下拉列表，任何建议或信息将不胜感激。

这是我使用的代码，

<TableBody>
    {item.userBankAccount.map((item, index) => {
        return (
            <TableRow hover key={index}>
                {!currentlyEditing ? (
                    <TextField
                        label="bankName"
                        name="bankName"
                        onChange={(e) => this.onChangeUserBankAccount(e, index)}
                        type="text"
                        value={item.bankName || ''}
                    />
                ) : (
                    <TableCell>{item.bankName}</TableCell>
                )}

                {!currentlyEditing ? (
                    <TextField
                        label="BankAddress"
                        name="bankAddress"
                        onChange={(e) => this.onChangeUserBankAccount(e, index)}
                        type="text"
                        value={item.bankAddress || ''}
                    />
                ) : (
                    <TableCell>{item.bankAddress}</TableCell>
                )}

                {!currentlyEditing ? (
                    <TextField
                        label="bankSwift"
                        name="bankSwift"
                        onChange={(e) => this.onChangeUserBankAccount(e, index)}
                        type="text"
                        value={item.bankSwift || ''}
                    />
                ) : (
                    <TableCell>{item.bankSwift}</TableCell>
                )}
            </TableRow>
        );
    })}
</TableBody>

Answer 1

问题就在这里，

在TableRow的每一行中你有

{!currentlyEditing ? (

这对所有 TableRow 都是一样的。因此，如果一个人获得 currentlyEditing = true，那么所有这些人都可以编辑。

解决方案：

只需在TableRow
中取currentlyEditing的state 因此，TableRow 中的每一个都有自己的 currentlyEditing 状态，
AND，因此同时其他人将不可编辑

反应编辑 Table

React Edit Table

edit

populate

reactjs

dropdown

解决方案：