无法输入我的输入内容，因为我已在ReactJS中将其值设置为this.state

Question

I'm facing some basic React problem.

I made a basic text input with change handling and onKeyPress handling but since i made its value equal to this.state.currentSearchText, i can't type in it, everything is binded, and it's working on some other project. I need light.

My input :

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

My change handling 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)

}

My key press handling :

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

The state of my SearchBar component :

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"/>