I'm building a ReactJS search ponent for data filtering through search.

The idea is that the user types a word, letter after letter, and the system will filter all registers containing that word. The basic ponent is detailed below:

class SearchInput extends Component {
    static propTypes = {
        onKeyUp: PropTypes.func,
        placeHolder: PropTypes.string,
        value: PropTypes.string
    };

state = {
    searchText: ""
};

handleKeyUp = event => {

    console.log(event.target.value) // <== No result. Always empty

    let newSearchText = event.target.value;
    this.setState({ searchText: newSearchText });
    if (this.props.onKeyUp) this.props.onKeyUp(newSearchText);
};

render() {
    console.log(this.state.searchText) // <== Always empty

    return (
        <div className="search-input">
            <div className="search-input-icon">
                <Icon name="faSearch" />
            </div>
            <input
                autoFocus="true" 
                type="text"
                onKeyUp={this.handleKeyUp}
                placeholder={this.props.placeHolder}
                value={this.state.searchText}
            />
        </div>
    );
}

I'm not getting the key pressed value on the handleKeyUp event handler.

It works if I ommit the value={this.state.searchText} (uncontrolled) from the code, but I need a way to set the searchText from outside the ponent (initialization, other ponent selection, etc.).

Why am I not getting the event.target.value data on my handler? How to fix it?

I'm building a ReactJS search ponent for data filtering through search.

The idea is that the user types a word, letter after letter, and the system will filter all registers containing that word. The basic ponent is detailed below:

class SearchInput extends Component {
    static propTypes = {
        onKeyUp: PropTypes.func,
        placeHolder: PropTypes.string,
        value: PropTypes.string
    };

state = {
    searchText: ""
};

handleKeyUp = event => {

    console.log(event.target.value) // <== No result. Always empty

    let newSearchText = event.target.value;
    this.setState({ searchText: newSearchText });
    if (this.props.onKeyUp) this.props.onKeyUp(newSearchText);
};

render() {
    console.log(this.state.searchText) // <== Always empty

    return (
        <div className="search-input">
            <div className="search-input-icon">
                <Icon name="faSearch" />
            </div>
            <input
                autoFocus="true" 
                type="text"
                onKeyUp={this.handleKeyUp}
                placeholder={this.props.placeHolder}
                value={this.state.searchText}
            />
        </div>
    );
}

I'm not getting the key pressed value on the handleKeyUp event handler.

It works if I ommit the value={this.state.searchText} (uncontrolled) from the code, but I need a way to set the searchText from outside the ponent (initialization, other ponent selection, etc.).

Why am I not getting the event.target.value data on my handler? How to fix it?

• javascript
• reactjs
• controlled-ponent

4 Answers 4

I'm pretty sure you have to listen to the onChange event on an input field to get the updated target value. simply change

<input onKeyUp={this.handleKeyUp} />

to

<input onChange={this.handleKeyUp} />

Try to use event.key instead.

The event.target.value just points to your this.state.searchText which hasn't been set yet.

seems you forgot to bind the function on the constructor:

class SearchInput extends Component {
  constructor(props) {
    super(props);
    this.handleKeyUp = this.handleKeyUp.bind(this);
  }

  //... any code here

  handleKeyUp = event => {
    console.log(event.target.value);
  }

  render() {
    //... any code here

    <input
      autoFocus="true" 
      type="text"
      onKeyUp={this.handleKeyUp}
      placeholder={this.props.placeHolder}
      value={this.state.searchText}
    />
  }
}

Use this:

let newSearchText = event.target.getAttribute('value')