Question

我在Link内有一个Gatsby <li>元素，并且我希望如果用光标单击Link或用{命中{ {1}}键。

<li>

以上代码位于enter块的内部，该块位于扩展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添加到Component，但不知道我可以传递给它的任何对象，其中包含对其子对象的引用...

我需要将事件委派给孩子的主要原因是因为onClickHandler（它从上方的<li>元素获得焦点）只能在tabIndex上工作，所以一旦input具有焦点，我希望用户能够按Enter键并使该事件传播到子<li>元素（这是使用盖茨比内部路由的特殊链接元素）。

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 ...
  }
}

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

1 个答案: