React中SVG圆形元素onClick事件异常问题求助

问题根源 #

1. 渲染时自动触发事件：你在容器组件中传递onClick={console.warn("TEST")}时，这行代码会在组件渲染阶段直接执行，而非等待点击事件触发，所以加载完成后会打印6次"TEST"。
2. 事件未正确绑定到可点击元素：即使尝试给<circle>加onClick={props.onClick}，如果传递的onClick本身不是函数引用，或者父组件没把事件正确传递到Circle组件，点击也不会生效。

修复步骤 #

1. 修正容器组件的 onClick 传递方式

把直接执行的语句改成函数形式，确保只有点击时才触发：

<svg viewBox={`${viewboxLocation.x} ${viewboxLocation.y} ${viewboxSize.x * viewboxScale} ${viewboxSize.y * viewboxScale}`} >
    <g stroke="black" fill="white" strokeWidth="2">
        {coordinates.results.map(milestone => (
            <MilestoneSVG 
                key={`Milestone${milestone.milestoneName}`} 
                posX={milestone.x} 
                posY={milestone.y} 
                milestoneName={milestone.milestoneName} 
                onClick={() => console.warn("TEST")} {/* 用匿名函数包裹执行语句 */}
            />
        ))}
        [...]
    </g>
</svg>

2. 确保Circle组件正确接收并绑定事件

修改Circle组件，将props中的onClick绑定到<circle>元素上（可选给<text>也绑定，实现点击文字也触发）：

function Circle(props) {
    const displayText = props.displayText;
    const size = props.size || 20; // 简化默认值写法
    const { posX, posY, onClick } = props; // 解构props更清晰

    return (
        <React.Fragment>
            <circle 
                cx={posX} 
                cy={posY} 
                r={size} 
                fill="white" 
                onClick={onClick} // 绑定点击事件到圆形
                style={{ cursor: 'pointer' }} {/* 可选：添加鼠标指针样式，提示可点击 */}
            />
            <text 
                x={posX} 
                y={posY} 
                textAnchor="middle"
                dy=".3em"
                onClick={onClick} {/* 可选：点击文字也触发事件 */}
            >{displayText}</text>
        </React.Fragment>
    );
}

export default Circle;

3. 检查MilestoneSVG组件的props传递

如果MilestoneSVG是封装Circle的中间组件，必须把onClick props传递给内部的Circle：

function MilestoneSVG(props) {
    return (
        <Circle 
            displayText={props.milestoneName}
            posX={props.posX}
            posY={props.posY}
            onClick={props.onClick} // 把onClick传递给Circle组件
        />
    );
}

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