如何避免 Reactjs 中的輸入值復位？

Question

我指的是本教程的簡單反應自動完成https://www.digitalocean.com/community/tutorials/react-react-autocomplete

但我有一個稍微不同的要求。 我希望在單擊input字段時出現所有建議，而不是在input字段上輸入內容。 我基本上是在實現一個要求，在單擊input字段時，它應該向用戶顯示可用的選項。

這是我的沙箱https://codesandbox.io/s/distracted-easley-wdm5x

特別是在Autocomplete.jsx文件中（如下所述）

import React, { Component, Fragment } from "react";
import PropTypes from "prop-types";

class Autocomplete extends Component {
  static propTypes = {
    suggestions: PropTypes.instanceOf(Array)
  };

  static defaultProps = {
    suggestions: []
  };

  constructor(props) {
    super(props);

    this.state = {
      // The active selection's index
      activeSuggestion: 0,
      // The suggestions that match the user's input
      filteredSuggestions: [],
      // Whether or not the suggestion list is shown
      showSuggestions: false,
      // What the user has entered
      userInput: ""
    };
  }

  onChange = (e) => {
    const { suggestions } = this.props;
    const userInput = e.currentTarget.value;

    // Filter our suggestions that don't contain the user's input
    const filteredSuggestions = suggestions.filter(
      (suggestion) =>
        suggestion.toLowerCase().indexOf(userInput.toLowerCase()) > -1
    );

    this.setState({
      activeSuggestion: 0,
      filteredSuggestions,
      showSuggestions: true,
      userInput: e.currentTarget.value
    });
  };

  onClick = (e) => {
    this.setState({
      activeSuggestion: 0,
      filteredSuggestions: [],
      showSuggestions: false,
      userInput: e.currentTarget.innerText
    });
  };

  onClick2 = (e) => {
    console.log("text check", e.currentTarget.innerText);
    if (e.currentTarget.innerText === "") {
      const { suggestions } = this.props;
      const filteredSuggestions = suggestions;
      this.setState({
        activeSuggestion: 0,
        filteredSuggestions,
        showSuggestions: true,
        userInput: e.currentTarget.innerText
      });
    }
  };

  onKeyDown = (e) => {
    const { activeSuggestion, filteredSuggestions } = this.state;

    // User pressed the enter key
    if (e.keyCode === 13) {
      this.setState({
        activeSuggestion: 0,
        showSuggestions: false,
        userInput: filteredSuggestions[activeSuggestion]
      });
    }
    // User pressed the up arrow
    else if (e.keyCode === 38) {
      if (activeSuggestion === 0) {
        return;
      }

      this.setState({ activeSuggestion: activeSuggestion - 1 });
    }
    // User pressed the down arrow
    else if (e.keyCode === 40) {
      if (activeSuggestion - 1 === filteredSuggestions.length) {
        return;
      }

      this.setState({ activeSuggestion: activeSuggestion + 1 });
    }
  };

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

    let suggestionsListComponent;

    if (showSuggestions) {
      if (filteredSuggestions.length) {
        suggestionsListComponent = (
          <ul className="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 className="no-suggestions">
            <em>No suggestions, you're on your own!</em>
          </div>
        );
      }
    }

    return (
      <Fragment>
        <input
          type="text"
          onChange={onChange}
          onKeyDown={onKeyDown}
          value={userInput}
          onClick={onClick2}
        />
        {suggestionsListComponent}
      </Fragment>
    );
  }
}

export default Autocomplete;

在返回部分的input元素中，

<input
          type="text"
          onChange={onChange}
          onKeyDown={onKeyDown}
          value={userInput}
          onClick={onClick2}
/>

我添加了一個調用 function onClick2的onClick功能。

onClick2 = (e) => {
    console.log("text check", e.currentTarget.innerText);
    if (e.currentTarget.innerText === "") {
      const { suggestions } = this.props;
      const filteredSuggestions = suggestions;
      this.setState({
        activeSuggestion: 0,
        filteredSuggestions,
        showSuggestions: true,
        userInput: e.currentTarget.innerText
      });
    }
  };

我的 function 只是在單擊input字段時返回所有建議。 我能夠從建議中獲取 select 項目，並將其放入input字段中。 但是當我再次單擊輸入字段時，該值消失了。

我希望此自動完成建議僅在單擊空input字段時顯示一次，並且在從列表中選擇項目后，我應該能夠進一步編輯該值。

我究竟做錯了什么？

Answer 1

輸入值不存儲在 innerText 中，而是存儲在 value prop 中。

看這個：

onClick2 = (e) => {
    console.log("text check", e.currentTarget.innerText);
    if (e.currentTarget.value === "") {
      const { suggestions } = this.props;
      const filteredSuggestions = suggestions;
      this.setState({
        activeSuggestion: 0,
        filteredSuggestions,
        showSuggestions: true,
        userInput: e.currentTarget.value
      });
    }
  };

這應該可以解決您的問題

Answer 2

您在 onClick2 function 中進行了錯誤的檢查。 而不是檢查 e.currentTarget.innerText === ""，它必須是 e.target.value，因為我們正在驗證輸入字段中的文本。

onClick2 = (e) => {
    console.log("text check", e.target.value);
    if (e.target.value === "") {
      const { suggestions } = this.props;
      const filteredSuggestions = suggestions;
      this.setState({
        activeSuggestion: 0,
        filteredSuggestions,
        showSuggestions: true,
        userInput: e.currentTarget.innerText
      });
    }
  };

這是工作鏈接 - https://codesandbox.io/s/jolly-meadow-5fr6x?file=/src/Autocomplete.jsx:1344-1711