Реакция захвата и всплывающих событий

Question

Я хочу захватить события keydown от детей.Это возможно?Скажем, у меня есть

onKeyDown = e => {
 e.stopPropagation();
 console.log("Hello world from Parent!");
 return false;
}

<ParentComponent onKeyDown={this.onKeyDown}>
  <div tabIndex='0' id='child'>Focus on me and press a button!</div>
</ParentComponent>

Я хочу напечатать «Hello World», когда вы нажимаете кнопку, сфокусированную на дочернем элементе div.

Я пробовал это, и похоже, что нетработать и читать другой поток SO , кажется, что он работает с обработчиками щелчков, пока используется e.stopPropagation ().Почему это не работает с событиями keydown?

Answer 1

Я предполагаю, что вы на самом деле не потребляете пропущенную onKeyDown опору в ParentComponent.Вам нужно сделать что-то с этим, например:

class ParentComponent extends Component {
  render(){
    return(
      <div onKeyDown={this.props.onKeyDown}>
        {this.props.children}
      </div>
    )
  }
};

См. Этот рабочий пример

По вопросам OP в комментариях ниже ...

Без гражданства:

const ParentComponent = (props) => (
  <div onKeyDown={props.onKeyDown}>{props.children}</div>
)

В делении:

const ParentComponent = (props) => (
  <div>
    <div onKeyDown={props.onKeyDown}>{props.children}</div>
  </div>
)