Hover, onClick功能不能在React中动态添加的内容(按钮)上工作

Question

我正在使用API输入URL并缩短它并将此缩短的URL与复制按钮动态添加到DOM中，以便用户获得缩短的URL但当我在react中添加复制URL的逻辑时它不起作用，我发现即使是简单的console。log语句也无法在按钮点击时工作对于这个动态添加的按钮

' import React from "从"/Button";import {useState} from "react">

函数LoadShortenUrl(道具){

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

}

导出默认LoadShortenUrl;'

这是我的组件代码，我调用handleButtonText函数onClick这个按钮，数组的长度将是0，首先，一旦用户提交url，它将循环通过这段代码，并添加元素到DOM。

Answer 1

try this

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

按照camelCase约定编写合适的代码它是onClick而不是onClick