在React中根据状态对象构建的表行上显示两个按钮吗？

Question

我已经建立了一个表，该表基于我的应用程序的根组件文件中的状态对象，在表行中包含内容。状态将作为道具传递给组件文件，在组件文件中它们被呈现并作为表行输出。我该如何去显示2个按钮的编辑和删除，它们仅显示在用户使用React悬停的那一行中？我为每个状态对象分配了一个id值。

这是我想要的样子：2 buttons show when hovering over table row

这是我的组件返回函数的外观

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

Answer 1

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

    const [show, setShow] = useState(false);


    <tr
      class="tr"
      onMouseOver={() => setShow(!show)}
      onMouseOut={() => setShow(!show)}
    >
      <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>
      </td>
      <td class="td">shoe.quantity</td>
    </tr>

您可以检查CodeSandBox