时间戳

首页 > 解决方案 > 在组件 onClick 中反应加载

reactjs - 在组件 onClick 中反应加载

问题描述

我试图在单击按钮时加载组件，但是当我单击下面代码中的按钮 () 时，似乎没有发生任何事情。我只是想显示一条复制的消息，然后在它显示给用户选择的文本被复制到他们的剪贴板后不久让它消失。

这是我当前的代码：

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}
    </>
  )
}

标签： reactjs

解决方案

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

推荐阅读