反应编辑表

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 状态，
并且，因此同时其他人将无法编辑