Отображение двух кнопок в строке таблицы, созданной из объекта состояния в React? - PullRequest
Новая
       25

Отображение двух кнопок в строке таблицы, созданной из объекта состояния в React?

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

Я построил таблицу с содержимым в строках таблицы на основе объектов состояния в файле компонента root моего приложения. Состояния передаются как реквизиты в файл компонента, где они отображаются и выводятся в виде строки таблицы. Как бы я go показал 2 кнопки редактирования и удаления, которые отображаются только в той строке, в которой пользователь наводит курсор мыши с помощью React? Я назначил значение id для каждого объекта состояния.

Вот как я бы хотел, чтобы он выглядел следующим образом: 2 кнопки отображаются при наведении курсора на строку таблицы

Здесь так выглядит функция возврата моего компонента 

<tbody class="tbody" key="shoe.id">
                <tr class="tr">
                    <td class="td">
                        {shoe.name}
                        <td>
                            <Button className="edit-delete-buttons" variant="tertiary" size="xs">Edit</Button>
                            <Button className="edit-delete-buttons" variant="tertiary" size="xs">Delete</Button>
                        </td>
                    </td>
                    <td class="td">
                        <div>{shoe.maker}</div>
                        <div>{shoe.company}</div>
                        <div>{shoe.wearer ? shoe.wearer : null}</div>
                        <div>{shoe.type ? shoe.type : null}</div>
                        <div>{shoe.style ? shoe.style : null}</div>
                        <div>{shoe.color ? shoe.color : null}</div>

                        <div>{shoe.description ? shoe.description : null}  </div>  
                    </td>
                    <td class="td">
                        {shoe.quantity}
                    </td>
                </tr>
            </tbody>

edit: 

const TableRender = (props) => {
const [show, setShow] = useState(false);
const shoesList = props.shoes.map(shoe => {
        return(
                <tbody class="tbody" key="shoe.id">
                <tr class="tr" onMouseOver={() => setShow(!show)} onMouseOut={() => setShow(!show)} key={shoe.id}>
                    <td class="td">
                        {shoe.name}
                       {show && (
                        <td>
                            <Button className="edit-delete-buttons" variant="tertiary" size="xs">Edit</Button>
                            <Button className="edit-delete-buttons" variant="tertiary" size="xs">Delete</Button>
                        </td>
                        )}
                    </td>
                    <td class="td">
                        <div>{shoe.maker}</div>
                        <div>{shoe.company}</div>
                        <div>{shoe.wearer ? shoe.wearer : null}</div>
                        <div>{shoe.type ? shoe.type : null}</div>
                        <div>{shoe.style ? shoe.style : null}</div>
                        <div>{shoe.color ? shoe.color : null}</div>

                        <div>{shoe.description ? shoe.description : null}  </div>  
                    </td>
                    <td class="td">
                        {shoe.quantity}
                    </td>
                </tr>
            </tbody>
        )
    })
    return(
        //output shoeeventsList
        <Fragment>
            {shoeeventsList}
        </Fragment>
    )
}
 }
 export default TableRender;

1 Ответ

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

Вы можете установить состояние для отображения кнопки и использовать onMouseOver и onMouseOut на <tr />, чтобы обновить состояние 

import React, { useState } from "react";
import "./styles.css";
const dataRow = ["row1", "row2"];
export default function App() {
  const [indexRow, setIndex] = useState(null);
  return (
    <div className="App">
      <tbody class="tbody" key="shoe.id">
        {dataRow.map((item, index) => (
          <tr
            class="tr"
            onMouseOver={() => setIndex(index)}
            onMouseOut={() => setIndex(null)}
          >
            <td class="td">
              Shoe name
              {indexRow === index && (
                <td>
                  <button
                    className="edit-delete-buttons"
                    variant="tertiary"
                    size="xs"
                  >
                    Edit
                  </button>
                  <button
                    className="edit-delete-buttons"
                    variant="tertiary"
                    size="xs"
                  >
                    Delete
                  </button>
                </td>
              )}
            </td>
            <td class="td">
              <div>shoe maker</div>
              <div>shoe company</div>
            </td>
            <td class="td">shoe.quantity</td>
          </tr>
        ))}
      </tbody>
    </div>
  );
}

, вы можете проверить CodeSandBox

...