从父级到子级反应事件委托

Question

我在<li>有一个 Gatsby Link元素，如果使用光标单击<li>或按enter键，我希望触发Link元素。

export default class Search extends Component {
    ...Constructor...
    render() {
        ...DOM elements...
        <input type="text" value={this.state.query} onChange={this.search} placeholder={'Search'} />
        {this.state.results.map((page, index) => (
            <li tabIndex={index} key={page.id} >
               <Link to={"/" + page.path}>{page.title}</Link>
            </li>
        ))}
        ...DOM elements...
    }
    ...More functions...
}

上面的代码位于render块内，该render块位于扩展Component的类内。

我已经尝试向<li>添加一个onClickHandler ，但不知道我可以传递给它的任何包含对其子项的引用的对象......

我需要将事件委托给孩子的主要原因是因为tabIndex （从其上方的input元素接收焦点）仅适用于<li> ，因此一旦<li>获得焦点，我希望用户能够点击 Enter 并让该事件传播到子<Link>元素（这是一个使用 Gatsby 内部路由的特殊链接元素）。

Answer 1

您可以将当前page.path以及事件直接传递给您的处理程序onKeyPress={e => this.goTo(e, page.path)} 。

例子。

import { navigate } from "gatsby"

export default class Search extends Component {
  ... redacted for brevity ...

  goTo = (e, path) => {
    if (e.Key === "Enter") {
      navigate(`/${path}`);
    }
  };

  render() {
    ... redacted for brevity ...
    {
      this.state.results.map((page, index) => (
        <li tabIndex={index} key={page.id} onKeyPress={e => this.goTo(e, page.path)}>
          <Link to={"/" + page.path}>{page.title}</Link>
        </li>
      ));
    }
    ... redacted for brevity ...
  }
}