如何處理 onKeyDown/Up 在 React 中打開列表項

Question

我有一個體育新聞list ，當用戶單擊文檔時-> doc 在 `right-slider.

需要實現當用戶單擊文檔時，之后他應該能夠通過按onKeyDown和onKeyUp來打開文檔的下方和上方。

這是打開一個文檔時新聞列表的外觀：

現在，如果用戶單擊onKeyDown open / select 下一個文檔，則文檔打開時。

在這種情況下，不知道如何使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

嘗試這樣的事情：

handleKeyDown(e) {
    const { cursor, result } = this.state
    // arrow up/down button should select next/previous list element
    if (e.keyCode === 38 && cursor > 0) {
      this.setState( prevState => ({
        cursor: prevState.cursor - 1
      }))
    } else if (e.keyCode === 40 && cursor < result.length - 1) {
      this.setState( prevState => ({
        cursor: prevState.cursor + 1
      }))
    }

Answer 2

假設父組件同時包含文檔列表和抽屜，您可以綁定keyDown事件到掛載document （並在卸載時取消綁定）：

import React, { useEffect } from React

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

然后在 handleKeyDown function 中增加或減少所選文檔（抽屜中的那個）的索引。 並將其傳遞給drawer組件