清除空输入中的数据-React.js

Question

I'm trying to find a way to check whether my input is cleared in order to clear data.

The logic i'm using for this check is if (searchTerm.length === 0) clear input... I've also tried if (searchTerm === '') but they don't work. The thing with these logic checks is that the event fires with when the input is cleared and 1 character is added where the length of the string is 0 when it should be 1?

When I console.log my input string length I get 0 for 1 character, 1 for 2 characters and when I completely clear the input I get 1 for 0 characters.

What is the proper way to check for a cleared input value?

Here is my logic:

class SearchBar extends Component {
  state = {
    searchTerm: '',
    error: null
  }

  handleChange = e => {
    const { searchTerm } = this.state

    this.setState({ searchTerm: e.target.value })

    if (searchTerm.trim() === '') {
      this.props.resetSearch()
    }
  }

  render() {
    const { searchTerm, error } = this.state

    return (
      <div className="input-container">
        { error && <p className="invalid">Please Enter Something</p> }
        <input 
          type="text"
          placeholder="search for a repo..."
          value={searchTerm}
          onChange={e => this.handleChange(e)}
          onKeyPress={e => e.key === 'Enter' && this.findRepos(e)}
        />
        <button 
          type="submit" 
          onClick={e => this.findRepos(e)}>
          Search
        </button>
      </div>
    )
  }
}

export default connect(null, { fetchRepos, resetSearch })(SearchBar)

Answer 1

handleChange = e => {
  const { searchTerm } = this.state

  this.setState({ searchTerm: e.target.value })

  if (searchTerm.trim() === '') {
    this.props.resetSearch()
  }
}

You are checking the previous state, not the current input value. Your code should be

handleChange = e => {
  const searchTerm = e.target.value;

  this.setState({ searchTerm: searchTerm })

  if (searchTerm.trim() === '') {
    this.props.resetSearch()
  }
}