Событие React onClick вызвало щелчок по дочернему элементу

Question

Событие запускается, когда я щелкаю по родительскому элементу, в котором есть атрибут 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'))

Когда я нажимаю в родительском элементе дочерний элемент переходит к вектору, который я только что щелкнул, но когда я щелкаю по дочернему элементу, дочерний элемент переходит в некоторую точку в верхнем левом углу (поскольку передаваемые координаты являются координатами смещения x и y дочернего элемента. , а не координаты родителя). Интересно, есть ли способ избежать дочернего элемента, чтобы вызвать событие onClick.

Answer 1

Проблема, с которой вы столкнулись здесь, вызвана javascript всплывающим событием. Чтобы это исправить, вам просто нужно предотвратить возникновение пузырей. Для этого добавьте следующий код в дочерний компонент.

<Child onClick = {(event) => event.stopPropagation();} place={this.state.locus} />

Подробнее о распространении событий вы можете прочитать здесь https://medium.com/@vsvaibhav2016 / event-bubbling-and-event-capturing-in- javascript -6ff38bec30e