onKeyDown 用于 react-typeahead 包，我该如何使用它？

Question

我查看了 Github 上的代码，但无法理解如何使用 onKeyDown 属性。目的是我得到如下所示的结果：

现在我希望 onKeyDown 在您逐一浏览结果时突出显示结果。然后我需要能够按 enter 到 select 选项.

任何人都可以指出我正确的方向吗？

如果这是一个新手问题，我很抱歉，但我似乎无法弄清楚如何使用此功能。请参阅下面我的应用程序这一部分的代码：

import React, {Component} from 'react';
import {Link} from 'react-router';
import LoginModal from '../homePage/LoginModal';
import {connect} from 'react-redux';
import {userLogout} from '../../actions/user.actions';
import $ from 'jquery';
import {Typeahead} from 'react-typeahead';
import {getPlaylists} from '../../actions/playlist.actions';
import {searchPlaylistData} from '../../helper';

class Nav extends Component {
  constructor(props) {
    super(props);
    this.state = {
      modal:false,
      toggleNav:false
    }

    this.toggleModal = this.toggleModal.bind(this);
    this.onToggleNav = this.onToggleNav.bind(this);
    this.onClickLogout = this.onClickLogout.bind(this);
    this.keyDown = this.keyDown.bind(this);
  }

  componentDidMount() {
    this.props.getPlaylists();
//     $('.navbar-nav').on('click', function(){
//       const collapse = $('#navbar').hasClass('collapse');
//       if (collapse === true){
//         // $('#navbar').removeClass('collapse');
//         this.setState({
//           toggleNav: false
//         })
//       }
//       else{
//         // $('#navbar').addClass('collapse');
//         this.setState({
//           toggleNav:true
//         })
//       }
//     });
}
  render () {
    return (
      <div>
      <nav className="navbar fixed-top navbar-static-top navbar-expand-lg navbar-light custom-bg">
        <a className="navbar-brand" href="#"><img className="logo" src="/images/logo.png"/></a>
        <button className="navbar-toggler" type="button" onClick={this.onToggleNav}>
          <span className="navbar-toggler-icon"></span>
        </button>
        <div id='navbar' className={this.state.toggleNav ? 'navbar-collapse' : 'collapse navbar-collapse'}>
          <ul className="nav navbar-nav mr-auto"></ul>
          <ul className="navbar-nav">
            <li className="nav-item active">
              <Link onClick={this.onToggleNav} className="nav-link" to={'/'}>Home</Link>
            </li>
            {this.props.userProfile.role === 'admin' ? 
            <li className="nav-item">
            <Link onClick={this.onToggleNav} className="nav-link" to ={'/addPlaylist'}>Playlists</Link>
          </li> :
            null }
            <li className="nav-item">
              <Link onClick={this.onToggleNav} className="nav-link" to ={'/contactUs'}>Contact</Link>
            </li>
            {}
          </ul>
          <div className="form-inline my-2 my-lg-0">
            {/* <input className="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"/> */}
            {console.log(this.props.playlists)}
            <Typeahead
              defaultValue=''
              options={this.props.playlists}
              filterOption='songTitle'
              displayOption={(option) => {
                return option.songTitle;
              }}
              onKeyDown={this.keyDown}
              customClasses={{
                input: "topcoat-text-input",
                results: "results-container"
              }} 
              className="form-control mr-sm-2"
              />

            {Object.keys(this.props.user).length !== 0 ? 
            <button onClick={this.onClickLogout} type="button" className="btn btn-primary my-2 my-sm-0">LogOut</button> : 
            <button onClick={this.toggleModal} type="button" className="btn btn-primary my-2 my-sm-0">Login</button>}
            
          </div>
        </div>
            <LoginModal show={this.state.modal} onClose={this.toggleModal} />
      </nav>
            </div>
    )
  }

   toggleModal () {
    this.setState({
      modal: !this.state.modal,
      toggleNav: false
    });
    
  }

  onToggleNav () {
    this.setState({
      toggleNav: !this.state.toggleNav
    })
  }

  onClickLogout () {
    this.props.userLogout();
    this.onToggleNav();
  }

  keyDown (event, event2) {
    console.log(event);
    console.log(event2)
  }
}

function mapStateToProps (state) {
  const searchablePlaylistData = searchPlaylistData(state.playlist.playlists);
  return {
    user: state.user.user,
    userProfile: state.user.userProfile,
    playlists: searchablePlaylistData

  }
}

function mapDispatchToProps (dispatch) {
  return {
    userLogout: () => {
      dispatch(userLogout());
    },
    getPlaylists: () => {
      dispatch(getPlaylists());
    }
  }
}
export default connect(mapStateToProps, mapDispatchToProps)(Nav);

我试过查看是否还有其他参数，但我认为它只是传入的事件。

Answer 1

我相信您对 onKeyDown 属性的目的感到困惑。

任何时候

onKeyDown 都会在按下 any 键时触发。听起来您想允许用户按 ▼ 键并循环显示当前选项，然后按 enter 到 select一。

谢天谢地，这是 Typeahead 的默认行为，我们只需要添加一些 CSS 就可以看到它的实际效果。

当用户输入一个值时，Typeahead 将显示 maxVisible 结果，我在下面的示例中使用 4。如果用户随后单击 ▼ 键，它将 select 结果中的第一项。单击 ▼ 将循环显示结果。然后单击 enter 将 select 结果并将其插入到输入中。如果没有适当的 CSS，将无法看到它的实际效果。所以你需要使用 customClasses 属性并给 hover 选项一个样式，所以很明显结果是 selected。

不幸的是，由于需要使用 react-typeahead npm 模块，无法在 Whosebug 中创建一个工作示例，所以这里是一个工作 WebpackBin，代码如下：

index.html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8"/>
    <link rel="stylesheet" type="text/css" href="app.css" />
  </head>
  <body>
    <div id="app"></div>
    <script src="main.js"></script>
  </body>
</html>

main.js

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import {Typeahead} from 'react-typeahead';

class Nav extends Component {
  constructor(props) {
    super(props);
  }

  render () {
    return (
      <div className="container">
        <Typeahead
          options={[
            'Waylon Dalton',
            'Justine Henderson',
            'Abdullah Lang',
            'Marcus Cruz',
            'Thalia Cobb',
            'Mathias Little',
            'Eddie Randolph',
            'Angela Walker',
            'Lia Shelton',
            'Hadassah Hartman',
            'Joanna Shaffer',
            'Jonathon Sheppard'
          ]}
          maxVisible={4}
          defaultValue="o"
          customClasses={{
            input: "typeahead-text-input",
            results: "typeahead-list__container",
            listItem: "typeahead-list__item",
            hover: "typeahead-active",
          }}
        />
      </div>
    )
  }
}

ReactDOM.render(<Nav/>, document.getElementById("app"));

app.css

html,
body {
  margin: 0;
  padding: 0;
  font-family: Arial;
  font-size: 18px;
}

.container {
  padding: 20px;
}

.typeahead-text-input {
  width: 100%;
  height: 36px;
  line-height: 36px;
  padding: 0 5px;
  border: 2px solid blue;
  font-size: 1em;
}

.typeahead-list__container {
  margin: 0;
  padding: 0;
}

.typeahead-list__item {
  list-style-type: none;
  padding: 5px 10px;
  margin: 0;
  font-size: 1em;
}

.typeahead-active {
  background: #eaeaea;
}

onKeyDown 用于 react-typeahead 包，我该如何使用它？

onKeyDown for react-typeahead package, how do i use it?

reactjs

onkeydown