在React中编辑特定的表行内容

Question

我制作了这张表，并添加了一些按钮，这些按钮可用于编辑和删除特定的行。我已经实现了删除功能，但不知道从哪里开始编辑特定行。

这里是table

我知道，当我按下编辑按钮时，应该有一个跟踪true或false的组件。true显示编辑视图（在文本输入中代替文本内容在表格上的位置），在false时仅显示文本内容在桌子。但是，除此之外，还不确定如何使文本框仅显示用户按其编辑的特定行。

这是我的州代码：

state = {
shoes : [
{
  name:”hello”
  list: [
  {
  {brand: 'klsdnalkd', type: 'da,sbd,ads', company: 'daskjbdas', binding: 'dasjdbas', style: 'dasdjkb', quantity: 1, id: 1},
  { brand: 'dyasidu82', type: 'dasdkasnd', company: 'dasndbamnsbda', quantity: 1, id: 2},
  { brand: 'dalsknda', type: 'dasljndas', company: 'dsaknal', quantity: 5, id: 3}
}]
]
}

[我知道我必须以某种方式使用每个数组的唯一ID来引用编辑按钮，但是我将如何使用已有的呈现表的代码来做到这一点？

这里是呈现表的组件代码（请忽略一些传入的函数，我只是在尝试一些事情来尝试实现此功能：]]

const TableRender = ({shoes, deleteShoeEvent, editingRowToggle, editRowToggle, showRowEditMode, showRowNormalMode}) => {
const [show, setShow] = useState(false);
const shoesList = shoes.map(shoe => {
    return(
        <tbody class="tbody">
            <tr class="tr" /*onMouseOver={() => setShow(!show)} onMouseOut={() => setShow(!show)}*/ key={shoe.id} {...!editingRowToggle ? showRowNormalMode: showRowEditMode}>
                <td class="td"> 
                    {shoe.brand}
                    <td>
                        <Button className="edit-delete-buttons" variant="tertiary" handleClick={editRowToggle} size="xs" >Edit</Button>
                        <Button className="edit-delete-buttons" variant="tertiary" size="xs" handleClick={() => {deleteShoeEvent(shoe.id)}}>Delete</Button>
                    </td>
                </td>
                <td class="td">
                    <div>{shoe.type}</div>
                    <div>{shoe.company}</div>
                    <div>{shoe.author ? shoe.author : null}</div>
                    <div>{shoe.binding ? shoe.binding : null}</div>
                    <div>{shoe.style ? shoe.style : null}</div>
                </td>
                <td class="td">
                    {shoe.quantity}
                </td>
            </tr>
        </tbody>
    )
})
return(
    <Fragment>
        {shoesList}
    </Fragment>
)
}
任何帮助都会很棒

我制作了这张表，并添加了一些按钮，这些按钮可用于编辑和删除特定的行。我已经实现了删除功能，但是不知道从哪里开始编辑...

Answer 1

Const edit = (editedShoe) => {
 Shoes = shoes.map(shoe => {
    If(shoe.id === id){
          Shoe = {...editedShoe}
    }

    Return shoe
 })
}