javascript - 如何处理 onKeyDown/Up 在 React 中打开列表项

Question

我有一个体育新闻列表，当用户单击文档时 --> 文档会在“右 slider ”中打开。

需要实现当用户单击文档时，他应该能够通过按 onKeyDown 和 onKeyUp 打开文档下方和上方的文档。

这是打开一个文档时新闻列表的外观:

现在，当文档打开时，如果用户单击onKeyDown 打开/选择下一个文档。

不知道如何使 onKeyDown 在这种情况下起作用。

这是一个文档组件:

const NewsItem = ({
  cover_image,
  title,
  body,
  publishing_date,
  author_name,
  topics,
  handleClick,
  isFullDocViewActive,
  isRowGridActive,
  hideText,
  style,
  className,
  id,
  type,
  isSliderView,
  newsTextCssClass,
  paragraphTextCssClass,
  permalink,
  isUnreadDoc,
  t
}) => (
  <Context.Consumer>
    {({ language }) => {
      const topicNames = topics.map((topic) => topic.name[language]);
      return (
        <div
          style={style}
          className={`${className || ''} ${
            isRowGridActive ? 'news-row-grid' : 'news-column-grid'
          } ${isUnreadDoc ? 'selected-doc' : ''}`}
          onKeyDown={(e) => {
            console.warn('on Click down', e.key);
          }}
        >
          <div className={isFullDocViewActive || isSliderView ? 'border-none' : 'border-bottom'}>
            <div className="card-labels">
              <div className="text-labels">
                {getLabelStatus(publishing_date, t)}
                {topicNames.length ? (
                  <span className="trending-label">
                    <span className="trending-icon">
                      <i className="material-icons md-19 trending-icon">trending_up</i>
                    </span>
                    <span className="topics-label" title={topicNames.join(', ')}>
                      {topicNames[0]}
                    </span>
                  </span>
                ) : (
                  ''
                )}
              </div>
              <div className="btn-icons">
                <a className="icon-btn" onClick={() => toClipboard(body[language])} role="button">
                  <i className="material-icons md-20">file_copy</i>
                </a>
                <a href={permalink} rel="noopener noreferrer" target="_blank" className="icon-btn">
                  <i className="material-icons md-21">open_in_new</i>
                </a>
              </div>
            </div>
            <div
              className="card-content-wrapper"
              role="button"
              onClick={() => handleClick && handleClick(id)}
            >
              <div className="card-content">
                <div className="card-image" style={getBackgroundImage(cover_image)} />
                <div className="card-title-section">
                  <p>
                    <span className="card-news-date">
                      {new Date(publishing_date).toLocaleDateString('ch')}
                    </span>
                    <span className="card-grey-text">
                      {type} - {author_name}
                    </span>
                  </p>
                  <p className="card-news-title" id={id}>
                    {title[language] || body[language]}
                  </p>
                </div>
              </div>
              {!hideText ? (
                <div className={newsTextCssClass || 'card-news-text'}>
                  <p className={paragraphTextCssClass}>{body[language]}</p>
                </div>
              ) : (
                ''
              )}
            </div>
          </div>
        </div>
      );
    }}
  </Context.Consumer>
);

Answer 1

假设父组件同时包含文档列表和抽屉，您可以在安装时将 keyDown 事件绑定(bind)到 document (并在卸载时取消绑定(bind)):

import React, { useEffect } from React

const parentComponent = () => {
  useEffect(() => {
    document.addEventListener('keydown', (e) => {
      handleKeyDown(e)
    })
    return (() => {
      document.removeEventListener('keydown', handleKeyDown)
    })
  })
}

然后在handleKeyDown函数中增加或减少所选文档(抽屉中的文档)的索引。并将其传递给 drawer 组件