當滑鼠懸停在元素上時，我想在 react jsx 中撰寫一個程式假設 <li>
<li><a>Pakistan cricket won the match</a></li>
<li><a>We should exercise every day</a></li>
并將這些子元素添加到相應<li>元素中
<img src='...' />
<p>details of header</p>
<button>add to favorite</button>
當滑鼠從<li>元素中移出時，應洗掉相應的子項
注意：滑鼠懸停時，子元素應該是可用的
uj5u.com熱心網友回復：
所以基本上你需要在父元素上有 onm ouseEnter 和 onm ouseLeave 并制作一個狀態來保存是否顯示附加資料這里是一個簡單的例子
import "./styles.css";
import {useState} from 'react'
function Children(){
return (
<>
<img src='https://picsum.photos/200/300' />
<p>details of header</p>
<button>add to favorite</button>
</>
)
}
function Parent() {
const [isMouseOver,setIsMouseOver] = useState(false)
const handleEnter = () => {
setIsMouseOver(true)
}
const handleLeave = () => {
setIsMouseOver(false)
}
return(
<div onMouseEnter={handleEnter} onMouseLeave={handleLeave}>
<h1>Hover me</h1>
{isMouseOver ?
<>
<Children />
</>:
null
}
</div>
)
}
export default function App() {
return (
<div className="App">
<Parent />
</div>
);
}同樣，您可以將父組件更改為您的 li 和應該對子組件可見的附加資料。
請注意，在此示例中 h1 是一個塊組件，因此您應該保留整個塊以使資料消失
演示在：https : //codesandbox.io/s/silly-dewdney-d8btf?file=/ src/App.js: 0-738
uj5u.com熱心網友回復：
您可以添加一些類并在其各自的 CSS 中處理滑鼠懸停 ( :hover)。
應用程式.js
import "./styles.css";
function ListItem({i})
{
return (
<li className="listitem">
<a href="stackoverflow.com">Link{i}</a>
<img className="hideele" src="" alt={i} />
<p className="hideele">Para{i}</p>
<button className="hideele">Button{i}</button>
</li>
);
}
export default function App() {
return (
<div className="App">
<ul>
<ListItem i={1} />
<ListItem i={2} />
<ListItem i={3} />
</ul>
</div>
);
}
索引.js
import { StrictMode } from "react";
import ReactDOM from "react-dom";
import App from "./App";
const rootElement = document.getElementById("root");
ReactDOM.render(
<StrictMode>
<App />
</StrictMode>,
rootElement
);
CSS：
.App {
font-family: sans-serif;
}
.listitem:hover .hideele {
display: block;
}
.hideele {
display: none;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/369862.html
標籤：javascript html css 反应