如何避免 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