在 React 中从状态对象构建的 table 行上显示两个按钮？

Question

我已经构建了一个 table，其中的内容基于我的应用程序根组件文件中的状态对象 table 行。状态作为 props 传递给组件文件，在那里它们被渲染并输出为 table 行。我将如何显示 2 个按钮编辑和删除，它们仅显示在用户使用 React 将鼠标悬停在其中的行中？我为每个状态对象分配了一个 id 值。

我希望它看起来像这样： 2 buttons show when hovering over table row

这是我的组件 return 函数的样子

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

编辑：

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;

Answer 1

您可以设置按钮的显示状态，并在 <tr /> 上使用 onMouseOver 和 onMouseOut 来更新状态

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

在 React 中从状态对象构建的 table 行上显示两个按钮？

Showing two buttons on a table row built from state object in React?

components

row

button

hover

reactjs