喜欢 select 一行 table 以在对话中编辑但保留 select 最后一行，编辑有效但仅针对最后一个

Question

这是我的代码，从 API 收到数据，但确实将其取出以使代码在沙箱上运行，如果有帮助，也许可以替换数据。将不胜感激任何帮助。 https://codesandbox.io/s/modest-thunder-0ns6o?file=/src/App.js

<TableBody>
    {item.userBankAccount.map((item, index) => {
      return (
        <TableRow hover key={index}>
          <TableCell>{item.bankName}</TableCell>
          <TableCell>{item.bankAddress}</TableCell>
          <TableCell>{item.bankAddress}</TableCell>
          <TableCell>{item.bankSwift}</TableCell>
          <TableCell>{item.accountName}</TableCell>
          <TableCell>{item.accountNo}</TableCell>
          <Dialog
            open={this.state.dialogueEditOpen}
            onClose={this.handleClose}
            aria-labelledby="form-dialog-title"
            index={index}
          >
            <DialogTitle id="form-dialog-title">Edit Bank</DialogTitle>
            <DialogContent>
              <TextField
                label="Bank Name"
                name="bankName"
                onChange={e => this.onChangeUserBankAccount(e, index)}
                type="text"
                value={item.bankName}
                variant="outlined"
              />
              <TextField
                label="Bank Address"
                name="bankAddress"
                onChange={e => this.onChangeUserBankAccount(e, index)}
                type="text"
                value={item.bankAddress || ""}
                variant="outlined"
              />
              <TextField
                label="Bank Swift"
                name="bankSwift"
                onChange={e => this.onChangeUserBankAccount(e, index)}
                type="text"
                value={item.bankSwift || ""}
                variant="outlined"
              />

              <TextField
                label="Account Name"
                name="accountName"
                onChange={e => this.onChangeUserBankAccount(e, index)}
                type="text"
                value={item.accountName || ""}
                variant="outlined"
              />
              <TextField
                label="AccountAddress"
                name="accountAddress"
                onChange={e => this.onChangeUserBankAccount(e, index)}
                type="text"
                value={item.accountAddress || ""}
                variant="outlined"
              />
              <TextField
                label="AccountNo"
                name="accountNo"
                onChange={e => this.onChangeUserBankAccount(e, index)}
                type="text"
                value={item.accountNo || ""}
                variant="outlined"
              />
            </DialogContent>
            <DialogActions>
              <Button
                onClick={e => this.handleClose(e)}
                color="primary"
              >
                Cancel
              </Button>
              <Button
                onClick={e => this.handleSubmit(e)}
                color="primary"
              >
                Save Changes
              </Button>
            </DialogActions>
          </Dialog>
          <TableCell align="right">
            <IconButton onClick={e => this.handleOpenEdit(e, index)}>
              <SvgIcon fontSize="small">
                <EditIcon />
              </SvgIcon>
            </IconButton>

            <IconButton onClick={e => this.handleRemove(e, index)}>
              <SvgIcon fontSize="small">
                <Trash2 />
              </SvgIcon>
            </IconButton>
          </TableCell>
        </TableRow>

Answer 1

问题出在索引中，只需在单击“编辑”时创建一个单独的状态即可获取数组编号并将其替换为索引，onchange 有效并在正确的位置保存数据。

喜欢 select 一行 table 以在对话中编辑但保留 select 最后一行，编辑有效但仅针对最后一个

Like to select one row in a table to edit in dialogue but keep selecting last one, edit works but only for the last one

reactjs

row

edit

react-table