React не отображает предложения автозаполнения форм - PullRequest
Новая
       3

React не отображает предложения автозаполнения форм

1 голос
/ 25 мая 2020

Я использую реакцию, чтобы создать панель для добавления нового продукта. Я создал отдельный класс автозаполнения, который должен отображать элемент ввода и список предлагаемых элементов автозаполнения внизу. Элемент ввода показывает, но не предлагает варианты автозаполнения. Посмотрите на код

Класс автозаполнения 

import React, { Component } from "react";
import firebase from "../Firebase";

export default class AutoCompleteDistID extends Component {
  constructor() {
    super();
    this.state = {
      sellerName: [],
      sellerId: [],
      suggestions: [],
    };
  }
  componentDidMount() {
    var sellerRef = firebase.database().ref().child("Sellers");
    sellerRef.once("value", (snapshot) => {
      snapshot.forEach((childSnap) => {
        var distrName = childSnap.val().sellerName;
        var distrId = childSnap.val().sellerName.sellerId;
        // var distrName = [{ name: data.sellerName }];
        this.setState((prevState) => {
          return {
            sellerName: [...prevState.sellerName, distrName],
            sellerId: [...prevState.sellerId, distrId],
            suggestions: [...prevState.suggestions, distrName],
          };
        });
      });
    });
  }

  onTextChange = (e) => {
    var sellerNames = [this.state.sellerName];
    const value = e.target.value;
    let newSuggestions = [];
    if (value.length > 0) {
      const regex = new RegExp(`^${value}`, "i");
      newSuggestions = sellerNames.sort().filter((v) => regex.test(v));
    }

    this.setState(() => ({ newSuggestions }));
  };

  renderSuggestions() {
    const newSuggestions = this.state.suggestions;
    if (newSuggestions.length === 0) {
      return null;
    }
    return (
      <ul>
        {newSuggestions.map((item) => (
          <li>{item}</li>
        ))}
      </ul>
    );
  }

  render() {
    return (
      <div>
        <input onChange={this.onTextChange} />
        {this.renderSuggestions}
      </div>
    );
  }
}

Основная форма 

import React, { Component } from "react";
import firebase from "../Firebase";
import AutoCompleteDistID from "./AutoCompleteDistID";

export default class Products extends Component {
  constructor() {
    super();

    this.state = {
      description: "",
      prodQty: "",
    };

    this.pushProduct = this.pushProduct.bind(this);
  }

  handleFormChange = (event) => {
    const target = event.target;
    const colName = target.name;
    this.setState({
      [colName]: event.target.value,
    });
  };

  pushProduct() {
    const userRef = firebase.database().ref().child("Users"); //Get reference to Users DB
    const prodData = this.state;
    userRef.push(prodData);
  }

  render() {
    return (
      <div>
        <br />
        <form style={{ border: "solid", borderWidth: "1px", width: "600px" }}>

          <br />
          <input
            type="text"
            value={this.state.prodQty}
            placeholder="Available Quantity"
            onChange={this.handleFormChange}
            name="prodQty"
          />
          <input
            type="text"
            value={this.state.description}
            placeholder="Description"
            onChange={this.handleFormChange}
            name="description"
          />
          <AutoCompleteDistID />
          <br />
          <br />
        </form>
        <button onClick={this.pushProduct} type="button">
          Add Product
        </button>
        <br />
      </div>
    );
  }
}

1 Ответ

0 голосов
/ 25 мая 2020

Переменная состояния suggestions, но вы устанавливаете newSuggestions. 

onTextChange = (e) => {
    var sellerNames = [this.state.sellerName];
    const value = e.target.value;
    let newSuggestions = [];
    if (value.length > 0) {
      const regex = new RegExp(`^${value}`, "i");
      newSuggestions = sellerNames.sort().filter((v) => regex.test(v));
    }
    // HERE IS THE MISTAKE
    this.setState(() => ({ suggestions: newSuggestions }));
  };

В AutoCompleteDistID метод рендеринга 

render() {
    return (
      <div>
        <input onChange={this.onTextChange} />
        {this.renderSuggestions()}
      </div>
    );
  }
...