防止在动态创建的元素上发生 onClick 事件

Question

我正在从数据库表中获取数据到我的反应应用程序中。 使用表格中的元素，我动态呈现按钮，并且该按钮应该具有onClick事件。 由于 map function onClick 事件的触发频率与元素存储在数据库表中的频率一样高。 所以我的问题是是否可以在动态创建时阻止 onClick 的触发？

//GET request with axios
const getColorHandler = () => {
    httpInstance
        .get("/api/color")
        .then(res => {
            console.log(res.data);
            setColorData(res.data);
        }).catch(err => {
            setColorData(null);
            console.log(err);
        })
};

//JSX
return(
    <section className="uk-flex">
        {colorData.map(color=> (
            <div className="uk-flex-row" key={color.id}>
                <div onClick={setColorHandler(color.type, color.price)}
                     className={
                            (color.id === 1 ? "greyColor" : "") ||
                            (color.id === 2 ? "redColor" : "") ||
                            (color.id === 3 ? "blueColor" : "") ||
                            (color.id === 4 ? "greenColor" : "")
                     }
                ></div>  
            </div>
        ))}
    </section>
);

Answer 1

正如您所经历的，您对 onClick si 的使用立即触发。 如果您想使用真正的onClick事件，那么您必须以这种方式进行事件：

<div onClick={() => setColorHandler(color.type, color.price)}

或者，如果您想使用event信息：

<div onClick={(e) => setColorHandler(color.type, color.price)}

小行通知下：使用可点击<div>是反模式，您可能会遇到 aria 可访问性问题。 更好地使用<button>元素。