ReactJSのthis.stateに値を設定しているので入力できません

Question

基本的な問題があります。

私は、変更処理とonKeyPressの処理で基本的なテキスト入力を行いましたが、その値をthis.state.currentSearchTextと同じにしたので、入力できず、すべてがバインドされ、他のプロジェクトで動作しています。私は光が必要です。

マイ入力：

<input type="text" value={this.state.currentSearchText} className="search-header input-text" placeholder={searchInputPlaceholder} onChange={this.handleChange} onKeyPress={(e) => this.handleKeyPress(e)} autoComplete="off"/> 

私の変更の取り扱いFUNC：

handleChange(event) { 

     this.setState({currentSearchText: event.target.value}) 

       console.log(this.state.currentSearchText) 

     event.target.value.length === 0 ? this.displayHistory() : this.displaySearch() 

       this.timeoutGTM = setTimeout(() => { 
        pushGTM({ 
         searchTerm: this.state.currentSearchText, 
         event: 'search_event' 
        }) 
       }, 400) 

} 

私のキーを押して処理：

handleKeyPress(event) { 
      if (event.key === 'Enter' && this.state.currentSearchText.length > 0) { 
      this.context.router.push('/search?searchEntry=' + this.state.currentSearchText) 
      } 
     } 

私の検索バーコンポーネントの状態：

class SearchBar extends Component { 
    constructor(props) { 
     super(props) 

     this.state = { 
      currentSearchText: '', 
      resultsPosition: 0, 
      nbTotalResults: 0, 
      nbHistoryItems: 0, 
      viewMode: false, 
      lastKeyPressed: '', 
      showResultsThumbnail: false 
     } 

     this._handleKeyPress = this._handleKeyPress.bind(this) 
     this.handleChange = this.handleChange.bind(this) 
     this.handleKeyPress = this.handleKeyPress.bind(this) 
     this.hideSearchContent = this.hideSearchContent.bind(this) 

     ControllerShortcuts.setOnKeyboardKeyPress('/',() => { 
      this._refInputSearch.focus() 
      this.onFocus() 
     }) 
    } 

Answer 1

ご入力フィールドでの使用のみのonChange

<input type="text" value={this.state.currentSearchText} className="search-header input-text" placeholder={searchInputPlaceholder} onChange={this.handleChange} autoComplete="off"/>