ですが、どうすれば使用できますか？

Question

Githubのコードを見て、onKeyDown小道具の使い方を理解できません。

そして今、私はあなたが1によってそれら1を通過し、その後、私は押しできるようにする必要があるときonKeyDownは結果を強調したい：目的は、私はそうのように示される結果を持っているということですenterを押してオプションを選択します。

誰でも正しい方向に向けることができますか？

これは初心者の質問ですが、この機能をどのように使用するのか分かりません。私のアプリのこのセクションについては、以下のコードを参照してください。

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は、いつでも実行されます。任意のキーが押されています。ユーザーが▼キーを押して現在のオプションを繰り返して、を入力してと入力して1つを選択できるようにしたいと思うようです。

ありがたいことに、これはTypeaheadのデフォルトの動作です。実際に動作するには、CSSを追加するだけで済みます。

ユーザーが値を挿入すると、TypeaheadにmaxVisibleの結果が表示されます。下の例では4を使用しています。ユーザーが▼キーをクリックすると、結果の最初の項目が選択されます。 ▼をクリックすると結果が表示されます。 をクリックするとと入力し、結果を選択して入力に挿入します。適切なCSSがなければ、これを実際に見ることはできません。したがって、customClasses小道具を使用し、hoverオプションにスタイルを与える必要がありますので、結果が選択されていることは明らかです。

は、残念ながらそれはので、ここで、原因react-typeaheadnpmモジュールを使用する必要性にStackOverflowの中に作業例を作成することはできません作業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; 
}