从React中的表更新值

Question

我正在构建一个简单的React App，并且有一个名为Clients的组件。在此组件中，有一个用于添加新客户端的窗体（ClientForm组件）和一个表，该表显示了我在数据库中拥有的所有客户端（ClientList组件）。我可以从数据库（MongoDB）中插入和删除，问题是更新客户端。

这是我的ClientList.js

    import React from 'react';
import Table from 'react-bootstrap/Table';

import ClientItem from './ClientItem';
import './ClientList.css';

const ClientList = props => {
    if (props.items.length === 0) {
        return (
          <div>
              <h2>Nenhum cliente registrado.</h2>
          </div>
        );
    }

    return (
      <Table responsive bordered hover variant="dark">
          <thead>
              <tr>
                  <th>Nome</th>
                  <th>Telefone</th>
                  <th>CPF</th>
                  <th>Cidade/UF</th>
                  <th>Ações</th>
              </tr>
          </thead>
          <tbody>
            {props.items.map(client => (
              <ClientItem
                callback={props.callback}
                key={client._id}
                id={client._id}
                phone={client.phone}
                name={client.name}
                cpf={client.cpf}
                city={client.city}
                UF={client.UF}
              />
            ))}
          </tbody>
      </Table>
    );
};

export default ClientList;

这是我的ClientItem.js

    import React from 'react';

import api from '../../shared/services/api';
import Button from '../../shared/components/FormElements/Button';

const ClientItem = props => {

    const editHandler = async event => {
        event.preventDefault();

        try {
            const id = event.target.id;

            await api.put('/clients/update/' + id + '');
            alert('Cliente Atualizado Com Sucesso');
        }
        catch (err) {
            alert('Erro ao Atualizar Cliente');
        }
    }

    const deleteHandler = async event => {
        try {
            let id = props.id
            const res = await api.delete('/clients/delete/'+id+'');
            alert('Deletado com Sucesso');
            props.callback();
        }
        catch (err) {
            alert('Erro ao Excluir Cliente');
        }
    }

    return (
        <tr id={props.id}>
            <td>{props.name}</td>
            <td>{props.phone}</td>
            <td>{props.cpf}</td>
            <td>{props.city}/{props.UF}</td>
            <td><Button id={props.id} type="submit" onClick={editHandler}>Edit</Button><Button danger onClick={deleteHandler}>Delete</Button></td>
        </tr>
    );
};

export default ClientItem;

[我的问题是：每个客户在我的表中都是一行，如何单击单击编辑按钮来获取该特定行中的所有数据。 （“删除”按钮工作正常）。

我尝试使每个<td>的内部都包含一个<input>，但是我不能使每个<tr>的内部都设为<form>

Answer 1