從父級到子級反應事件委托

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