У события onClick в реакции есть приоритеты при выборе? Если да, как вы их меняете?

Question

У меня есть следующий код JSX

<div onClick={() => this.props.callFunction()}>
    <h2>Heading 1</h2>
    <MyComponent1 />
<div>

Если я добавлю событие нажатия в тег h2, оно будет работать нормально, но если я добавлю его в тег div вне его или тег MyComponent1, оно не будет работать. Это потому, что в 'MyComponent` уже есть onClick внутри?

EDIT: App.js

render()
{
    return(
        <div className="flex-container" style={{"position":"absolute", "width":"90.5%","top":"57px", "right":"0px", "flex": "1","display":"flex"}}>
          <div className="widget" onClick={() => { this.props.viewComponent("project") }}>
            <h2>Project Details</h2>
            <ProjectWidget/>  
          </div>
          <div className="widget" onClick={() => { this.props.viewComponent("resource") }}>
            <h2>Resource Details</h2>
            <ResourceWidget/>
          </div>
        </div>
    )
}

ProjectWidget

return (
        <div>
            {!isLoading ? (
                <div>
                    <ReactDataGrid
                        columns={this._columns}
                        rowGetter={rowGetter}
                        rowsCount={data.length}
                    />
                </div>
            )
                : (
                    <p>Loading...</p>
                )
            }
        </div>
    );

Answer 1

Я сделал небольшую демонстрацию в CodeSandbox, пытаясь повторить ваш случай. Для меня клики работают во всех трех случаях, а именно Div, H1 и CustomComponent.

Посмотрите прямо здесь: https://codesandbox.io/s/jz5qzonjjv

Answer 2

Это поведение имеет мало общего с React, но больше связано с самим Javascript. Распространение событий происходит в три этапа,

• Capture
• Цель
• Пузырящийся

Теперь в реакции реагируют события, написанные как onClick, которые запускаются в цель и всплывают. Если вы хотите использовать фазу захвата, вы должны указать событие, например onClickCapture, то есть добавив Capture в качестве суффикса к событию.

Теперь в вашем случае,

<div onClick={() => this.props.callFunction()}>
    <h2>Heading 1</h2>
    <MyComponent1 />
<div>

onClick указывается для div, и, следовательно, если вы щелкнете в Заголовке 1, событие onClick будет вызвано h2 и всплывет до div, где оно будет захвачено.

Теперь предположим, что вы щелкаете мышью по области, занятой MyComponent1, в которой, как вы упомянули, в компоненте указан onClick, событие будет записано в div в MyComponent1, для которого указана обработанная информация, и если вы не stopPropagation в обработчике события this событие будет передано в родительский div, где оно будет перехвачено.

Теперь рассмотрим третий случай, где вы указываете onClick для MyComponent1, как

<MyComponent1 onClick={() => this.props.callFunction()}/>

Здесь onClick в не обработчике на MyComponent1, но передается как компонент для Component, и если вы не используете его в Component для присвоения div верхнего уровня, этот обработчик не будет работать

Ваш обработчик должен использоваться как

render() {
   return (
      <div onClick={this.props.onClick}>P{/* rest content */}</div>
   )
}