点击组件中的反作用负载

Question

我试图在单击按钮时加载组件，但当我单击下面代码中的按钮((时，似乎什么都没有发生。我只是想显示一条复制的消息，然后在它出现后不久让它消失，向用户显示所选文本已复制到他们的剪贴板。

这是我当前的代码：

import React, { useState } from 'react'
import Clipboard from 'react-clipboard.js';
const AddComponent = () => {
console.log("copied")
return (
<p className="copied">copied to clipboard!</p>
)
};
export default function Item(props) {
const { itemImg, itemName } = props
return (
<>
<Clipboard data-clipboard-text={itemName} onClick={AddComponent} className="item-container display-flex">
<img src={itemImg} alt={itemName} className="item-img" />
<h3>{itemName}</h3>
</Clipboard>
{AddComponent}
</>
)
}

Answer 1

大多数情况下，您希望拥有一个状态控件，以有条件地呈现给定的组件，如{ isTrue && <MyComponent /> }。如果isTrue具有真值，则&&运算符仅对<MyComponent />求值。isTrue是您可以控制并更改为显示MyComponent的某种状态。

在您的情况下，您的onClick应该负责控制状态值：

import React, { useState } from 'react'
export default function Item(props) {
const { itemImg, itemName } = props
const [isCopied, setIsCopied] = useState(false)
const onCopy = () => {
setIsCopied(true)
setTimeout(() => {
setIsCopied(false)
}, 600)
}
return (
<>
<div data-clipboard-text={itemName} onClick={onCopy} className="item-container display-flex">
<img src={itemImg} alt={itemName} className="item-img" />
<h3>bua</h3>
</div>
{isCopied && <AddComponent/>} // short circuit to conditional render
</>
)
}

您可以考虑检查为您实现Toast消息的repo-react Toast ify。

Answer 2

您希望onClick是一个常规函数，而不是一个功能组件，并且在常规函数中实现一些逻辑来更新Item的状态，以记录剪贴板被单击。然后在Item中，不总是包括<AddComponent />，而是仅基于Item的状态来包括它。