javascript - 添加了一个 props onPress，因为我正在调用事件handleEvent。但方法内没有打印任何内容

Question

• 我正在尝试实现一个类似于 Google 航类的文本框。
• 所以我构建了一个 React 自动完成原型(prototype)。
• 但我面临着一个问题。
• 现在，在 Google Flights 文本框中，当我点击文本框时，它会显示所有结果，而无需输入任何内容。
• 但就我而言，如果我只输入一些内容，它就会显示结果。
• 因此，我在文本框中添加了一个 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，因为当未键入任何内容时，数组filteredSuggestions 为空。

console.log('' == true) => false 也 console.log([].length == true) => false