добавил реквизит onPress в том, что я вызываю событие handleEvent. но ничего не печатает внутри метода

Question

• Я пытаюсь создать текстовое поле, похожее на рейсы Google.
• , поэтому я создал прототип автозаполнения реагирования.
• но в этом я сталкиваюсь с проблемой.
• прямо сейчас в текстовом поле google полетов, когда я нажимаю на текстовое поле, отображаются все результаты, не вводя ничего.
• но в моем случае, если я наберу что-то только, это покажет результаты.
• поэтому в текстовое поле я добавил реквизит onPress, в котором я вызываю событие handleEvent.
• но внутри метода ничего не печатается.
• Можете ли вы сказать мне, как этого добиться, чтобы в будущем я сам это исправил.
• предоставив мой фрагмент кода и песочницу ниже

https://codesandbox.io/s/xp6x167kq4

 handleEvent = () => {
    console.log("I was clicked");
    alert("I was clicked");
  };


  render() {
    const {
      onChange,
      onClick,
      onKeyDown,
      state: {
        activeSuggestion,
        filteredSuggestions,
        showSuggestions,
        userInput
      }
    } = this;

    let suggestionsListComponent;

    if (showSuggestions && userInput) {
      if (filteredSuggestions.length) {
        suggestionsListComponent = (
          <ul class="suggestions">
            {filteredSuggestions.map((suggestion, index) => {
              let className;

              // Flag the active suggestion with a class
              if (index === activeSuggestion) {
                className = "suggestion-active";
              }

              return (
                <li className={className} key={suggestion} onClick={onClick}>
                  {suggestion}
                </li>
              );
            })}
          </ul>
        );
      } else {
        suggestionsListComponent = (
          <div class="no-suggestions">
            <em>No suggestions, you're on your own!</em>
          </div>
        );
      }
    }

    return (
      <Fragment>
        <input
          type="text"
          onChange={onChange}
          onKeyDown={onKeyDown}
          value={userInput}
          onPress={this.handleEvent}
          //onPress={this.handleEvent}
        />
        {suggestionsListComponent}
      </Fragment>
    );
  }

Answer 1

Я полагаю, это потому, что в исходном состоянии вы написали

this.state = {
  activeSuggestion: 0,
  filteredSuggestions: [],
  showSuggestions: false,
  userInput: '',
};

и позже вы запускаете

if (showSuggestions && userInput) но при первоначальном щелчке userInput по-прежнему равняется '', что равно false. Внизу снова вы запускаете if (filteredSuggestions.length), что также равно 0, потому что когда ничего не набрано, массив FilterSuggestions пуст.

console.log('' == true) => false также console.log([].length == true) => false