React中如何阻止动态创建元素时自动触发onClick事件？

你当前的问题出在onClick绑定的是函数调用结果，而非函数本身：onClick={setColorHandler(color.type, color.price)} 这种写法会在组件渲染（map循环创建元素）时立刻执行setColorHandler，所以触发次数等于数据条数。

解决这个问题有两种常用方式：

方式一：用箭头函数包裹事件处理逻辑 #

在onClick中传入一个箭头函数，点击时才会执行内部的setColorHandler调用：

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

方式二：让事件处理函数返回一个闭包函数 #

修改setColorHandler的定义，让它接收参数后返回一个处理函数，这样绑定到onClick的就是返回的函数，不会立即执行：

// 修改后的setColorHandler
const setColorHandler = (type, price) => {
  return () => {
    // 这里写原来的点击逻辑，比如设置状态、处理数据等
    console.log("选中颜色：", type, "价格：", price);
    // 示例：setSelected({ type, price });
  };
};

// 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={
                        {
                            1: "greyColor",
                            2: "redColor",
                            3: "blueColor",
                            4: "greenColor"
                        }[color.id] || ""
                     }
                ></div>  
            </div>
        ))}
    </section>
);

另外顺便优化了className的写法，用对象映射代替冗余的条件判断，代码更简洁易维护。

内容的提问来源于stack exchange，提问作者taathy