在特定列表项中显示按钮 - 反应 - antd答案

【问题标题】：show button in specific list item- react - antd在特定列表项中显示按钮 - 反应 - antd
【发布时间】：2020-06-30 12:48:21
【问题描述】：

我有一个物品清单。我想在用户将鼠标悬停在特定项目上时显示删除按钮。

我正在使用 React 和 ant typescript。

我试过这段代码：

import React, { useEffect, useState } from 'react';
import styles from './App.module.scss';
import { List, Button } from 'antd';
import { getCasesList } from '../../services/AuthService';
import { ReactComponent as Delete } from '../../assets/svg/deleteDraft.svg';
import { Message } from '../../interfaces/Message';

 const App = () => {

  const [messages, setMessages] = useState<Message[]>([]);
  const [isShown, setIsShown] = useState(false);

useEffect(() => {
getCasesList()
  .then((res) => {
    setMessages(res.data);
  })
  .catch((error) => {
  });
 }, []);

const deleteMsg = (e: any) => {
console.log("clicked!!!", e);
}

return (
<>
  <List
    className={styles['list']}
    dataSource={messages}
    renderItem={(item: Message) => (
      <List.Item
        onMouseEnter={() => setIsShown(true)}
        onMouseLeave={() => setIsShown(false)}>
        <h1> hi {item.title}</h1>
        {isShown && (
          <Button className={styles['delete-btn']} icon={<Delete />} onClick={(e) => deleteMsg(e)} />
          )}
      </List.Item>
    )}
  />
</>
);
};
export default App;

我从这段代码中得到的是显示（所有）项目按钮，不仅是悬停的，使用“onMouseEnter”。有没有办法使用列表组件只显示悬停项的按钮？

任何建议都会有所帮助，谢谢

【问题讨论】：

标签： javascript reactjs typescript antd

【解决方案1】：

这可以通过一些简单的 CSS 和 :hover 选择器来完成。

const Item = props => {
  return (
    <div className="item">
      Item number {props.num}
      <button>Delete {props.num}</button>
    </div>
  )
}

ReactDOM.render(
  <React.Fragment>
    <Item num={1} />
    <Item num={2} />
    <Item num={3} />
    <Item num={4} />
  </React.Fragment>,
  document.getElementById("root")
);

button {
  display: none;
}

.item:hover button {
  display: inline-block;
}

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

【讨论】：