Javascript 单击子元素触发的React onClick事件

当我单击包含onClick属性的父元素时，以及当我单击其没有onClick属性的子元素时，都会触发该事件

import React from 'react';
import ReactDOM from 'react-dom';
import './index.scss';

function Child(props){
    return(
        <div className='child'
                 style={
                    {
                        left:`${props.place[0]}px`,
                        top: `${props.place[1]}px`
                    }
                 }/>
    );
}   

class App extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            locus:[],
        }

        this.relocate = this.relocate.bind(this);
    }

    componentDidUpdate(){
        console.table(this.state);
    }

    relocate(event){
        this.setState({
            locus:[event.nativeEvent.offsetX, event.nativeEvent.offsetY]
        })
    }

    render(){
        return(
            <div className="parent"
                     onClick={this.relocate}>
                <Child place={this.state.locus} />
            </div>
        );
    }
}

ReactDOM.render(<App />, document.getElementById('root'))

从“React”导入React；
从“react dom”导入react dom；
导入“/index.scss”；
功能儿童（道具）{
返回(
);
}   
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
位点：[]，
}
this.relocate=this.relocate.bind（this）；
}
componentDidUpdate（）{
console.table（此.state）；
}
重新定位（事件）{
这是我的国家({
轨迹：[event.nativeEvent.offsetX，event.nativeEvent.offsetY]
})
}
render（）{
返回(
);
}
}
ReactDOM.render（，document.getElementById（'root'））

---

当我单击父元素时，子元素转到我刚才单击的向量，但当我单击子元素时，子元素转到左上角附近的某个点（因为传递的坐标是子元素的偏移x和y坐标，而不是父元素的坐标）。我想知道是否有办法避免子元素触发onClick事件。

这里的问题是由javascript事件冒泡引起的。要解决这个问题，你只需要防止冒泡的发生。为此，向子组件添加下一个代码

---

event.stopPropagation（）；}place={this.state.locus}/>

这里的问题是由javascript事件冒泡引起的。要解决这个问题，你只需要防止冒泡的发生。为此，向子组件添加下一个代码

event.stopPropagation（）；}place={this.state.locus}/>