Блог

Я пытаюсь реализовать React-самовнушение в своем проекте. Что я пытаюсь сделать: сделайте самовнушение react отдельным компонентом, импортируйте и используйте его там, где я захочу, с другим вводом предложений. Но я не мог понять, как передать список предложений и выбрать список предложений в качестве опоры для компонента самовнушения. Может ли кто-нибудь, пожалуйста, помочь с этим

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

вот как я импортирую свой компонент самовнушения:

 <div style={{ display: "flex", flexDirection: "row" }}>
              <label>Customer :</label>
              <AutoSuggest />
            </div>
 

а вот отдельный компонент самовнушения в autosuggest.js файл

 import React from "react";
import Autosuggest from "react-autosuggest";
// import theme from "../components/stylesheet/theme.css";
// Imagine you have a list of languages that you'd like to autosuggest.
const languages = [
  {
    name: "C",
    year: 1972,
  },
  {
    name: "Elm",
    year: 2012,
  },
  {
    name: "elem",
    year: 2012,
  },
  {
    name: "Elaaa",
    year: 2012,
  },
  {
    name: "Eliii",
    year: 2012,
  },
  {
    name: "Eaaam",
    year: 2012,
  },
  {
    name: "Elllllm",
    year: 2012,
  },
  {
    name: "Elalal",
    year: 2012,
  },
];

const theme = {};

// Teach Autosuggest how to calculate suggestions for any given input value.
const getSuggestions = (value) => {
  const inputValue = value.trim().toLowerCase();
  const inputLength = inputValue.length;

  return inputLength === 0
    ? []
    : languages.filter(
        (lang) => lang.name.toLowerCase().slice(0, inputLength) === inputValue
      );
};

// When suggestion is clicked, Autosuggest needs to populate the input
// based on the clicked suggestion. Teach Autosuggest how to calculate the
// input value for every given suggestion.
const getSuggestionValue = (suggestion) => suggestion.name;

// Use your imagination to render suggestions.
const renderSuggestion = (suggestion) => <div>{suggestion.name}</div>;

export default class AutoSuggest extends React.Component {
  constructor() {
    super();

    // Autosuggest is a controlled component.
    // This means that you need to provide an input value
    // and an onChange handler that updates this value (see below).
    // Suggestions also need to be provided to the Autosuggest,
    // and they are initially empty because the Autosuggest is closed.
    this.state = {
      value: "",
      suggestions: [],
    };
  }

  onChange = (event, { newValue }) => {
    this.setState({
      value: newValue,
    });
  };

  // Autosuggest will call this function every time you need to update suggestions.
  // You already implemented this logic above, so just use it.
  onSuggestionsFetchRequested = ({ value }) => {
    this.setState({
      suggestions: getSuggestions(value),
    });
  };

  // Autosuggest will call this function every time you need to clear suggestions.
  onSuggestionsClearRequested = () => {
    this.setState({
      suggestions: [],
    });
  };
  //   onChange = (e) => {
  //     this.setState({
  //       value: e,
  //     });
  //   };

  render() {
    const { value, suggestions } = this.state;
    // Autosuggest will pass through all these props to the input.
    const inputProps = {
      placeholder: "Type a programming language",
      value,
      onChange: this.onChange,
    };

    // Finally, render it!
    return (
      <Autosuggest
        suggestions={suggestions}
        onChange={this.onChange}
        onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
        onSuggestionsClearRequested={this.onSuggestionsClearRequested}
        getSuggestionValue={getSuggestionValue}
        renderSuggestion={renderSuggestion}
        inputProps={inputProps}
        theme={styles}
      />
    );
  }
}

const styles = {
  suggestionsContainerOpen: {
    display: "block",
    position: "absolute",
    top: "51px",
    width: "280px",
    border: "1px solid #aaa",
    backgroundColor: "#fff",
    fontFamily: "Helvetica, sans-serif",
    fontWeight: 300,
    fontSize: "16px",
    borderBottomLeftRadius: "4px",
    borderRottomRightRadius: "4px",
    zIndex: 2,
  },
  inputFocused: {
    outline: "none",
  },
  container: {
    position: "relative",
  },
  inputOpen: {
    borderBottomLeftRadius: 0,
    borderBottomRightRadius: 0,
  },
  input: {
    width: "240px",
    height: "30px",
    padding: "10px 20px",
    fontFamily: "Helvetica, sans-serif",
    fontWeight: "300",
    fontSize: "16px",
    border: "1px solid #aaa",
    borderRadius: "4px",
  },
  suggestionsList: {
    margin: 0,
    padding: 0,
    listStyleType: "none",
  },
  suggestion: {
    cursor: "pointer",
    padding: "10px 20px",
  },
  suggestionHighlighted: {
    backgroundColor: "#ddd",
  },
};