Хотите иметь возможность редактировать определенные c строк в таблице на React - PullRequest
Новая
       17

Хотите иметь возможность редактировать определенные c строк в таблице на React

0 голосов
/ 27 марта 2020

Я создал эту таблицу и добавил кнопки, которые позволят редактировать и удалять определенные c строки. Я уже реализовал функцию удаления, но понятия не имею, с чего начать редактирование указанных c строк.

Вот таблица

Я понимаю, что когда я нажмите кнопку редактирования, там должен быть компонент, который отслеживает true или false .. true, показывающий представление редактирования (текстовый ввод вместо того, где текстовое содержимое находится в таблице), и false просто отображающий текстовое содержимое в таблицах. Но кроме того, я не уверен, как заставить отображать только текстовые поля только для указанной строки c, на которую нажимает пользователь.

Вот мой код состояния: 

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

Я понимаю что мне нужно как-то использовать уникальный идентификатор каждого массива для ссылки на кнопку редактирования, но как бы я go сделал это с кодом, который у меня уже есть для рендеринга таблицы?

Вот код компонента для рендеринга таблица (Пожалуйста, не обращайте внимания на некоторые из переданных функций, я просто пытался реализовать это): 

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>
)
}

Любая помощь будет отличной

...