您好，我有一個陣列，當我單擊按鈕時，我想在 p 元素（{item.adress}=> 它是一個陣列項）中復制文本。你能幫我嗎？
import classes from './CryptoBox.module.css'
const CryptoBox = (props) => {
let item = props.item
return(
<div className={classes.box}>
{item.map(item => (
<div className={classes.boxx} key={Math.random().toString(36).slice(2)}>
<img src={item.img} alt={item.id}/><br/>
<p id={item.adress} hidden>{item.adress}</p>
<span>
<button onClick={}>
{props.link}
</button>
</span>
</div>
))}
</div>
)
}
export default CryptoBox;
uj5u.com熱心網友回復：
由于我希望您希望根據您的代碼隱藏該段落，因此您可以在 onClick 函式中使用“console.log”來輸出您單擊的任何專案的 item.address。如下所示：
<button onClick={console.log()}>
{props.link}
</button>
uj5u.com熱心網友回復：
受此答案的啟發，但可能有一些方法可以優化。如果要復制到剪貼板：
const CryptoBox = (props) => {
let item = props.item;
const copyValue = (val) => {
// Create a "hidden" input
var aux = document.createElement("input");
// Assign it the value of the specified element
aux.setAttribute("value", val);
// Append it to the body
document.body.appendChild(aux);
// Highlight its content
aux.select();
// Copy the highlighted text
document.execCommand("copy");
// Remove it from the body
document.body.removeChild(aux);
};
return(
<div className={classes.box}>
{item.map(item => (
<div className={classes.boxx} key={Math.random().toString(36).slice(2)}>
<img src={item.img} alt={item.id}/><br/>
<p id={item.adress} hidden>{item.adress}</p>
<button onClick={() => copyValue(item.adress)}>
{props.link}
</button>
</div>
))}
</div>
)
}
export default CryptoBox;
uj5u.com熱心網友回復：
你需要p標簽嗎？因為如果你想復制到剪貼板，你只需要在你的按鈕中做這樣的事情
<button onClick={() => navigator.clipboard.writeText(item.adress)}>
{item.link}
</button>
p 標簽不是復制到剪貼板所必需的，因為您實際上擁有item.address映射時的值，因此您可以傳遞它而不是通過 dom 查找為用戶隱藏的 p 標簽。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/435174.html
標籤：javascript html 反应 功能 反应钩子