Hover、onClick 功能不适用于 React 中动态添加的内容（按钮）

Question

我正在获取 URL 输入并使用 API 缩短它，并将带有复制按钮的缩短的 URL 动态添加到 DOM，以便用户获得缩短的 URL，但是当我在 React 中添加复制 URL 的逻辑时，它并没有工作，我发现即使是简单的 console.log 语句也无法在单击此动态添加的按钮时起作用

import React from "react";
import Button from "./Button";
import { useState } from "react";

function LoadShortenUrl(props){

    const [copyText, setCopyText] = useState("");
    const [buttonText, setButtonText] = useState("Copy");

    function handleButtonText() {
        console.log("Clicked");
        setButtonText("Copied");
    } 

    const handleCopy = () => {
        navigator.clipboard.writeText(copyText)
        alert("Text Copied");
        console.log("Text Copied");
    };

    const links = Array.from({ length: props.ogLink.length }, (_, i) => (
        <div className="display-url">
            <p key={i}>
                {props.ogLink[i]} 
            </p>
            <a className="shorten-link-position" href={props.shortenLink[i]}>{props.shortenLink[i]}</a>
            <Button OnClick={handleButtonText} buttonText="Copy" className="submitButton"></Button>
        </div>
      ));

    return (
        <>
        {links}
        </>
    )
}

export default LoadShortenUrl;

这是我为该按钮调用

handleButtonText

函数 onClick 的组件代码，数组的长度首先为 0，一旦用户提交 url，它将循环执行此代码并将元素添加到 DOM。

Answer 1

try this


 ***<Button onClick={handleButtonText} buttonText="Copy" className="submitButton"></Button>***

编写正确的代码，例如驼峰命名法它是onClick而不是OnClick