Блог

Я создал функции автозаполнения с помощью понижающего переключения, используя react js. Но проблема в том, что когда я ищу что-то, значение поля ввода исчезает, когда я нажимаю снаружи. Вот пример кода.

 import logo from './logo.svg';
import './App.css';
import React, { useState } from "react";
import Highlighter from "react-highlight-words";
import Downshift from "downshift";
import axios from 'axios';

function App() {
  const [names, setnames] = useState([{

  const [searchTerm, setSearchTerm] = useState('')
  const [movie, setmovie] = useState([])
   fetchMovies = fetchMovies.bind(this);
   inputOnChange = inputOnChange.bind(this);

  function inputOnChange(event) {
    if (!event.target.value) {
      return;
    }
    fetchMovies(event.target.value);
  }

  function downshiftOnChange(selectedMovie) {
    alert(`your favourite movie is ${selectedMovie.title}`);
  }

  function fetchMovies(movie) {
    const moviesURL = `https://api.themoviedb.org/3/search/movie?api_key=1b5adf76a72a13bad99b8fc0c68cb085amp;query=${movie}`;
    axios.get(moviesURL).then(response => {
      setmovie(response.data.results);
      // this.setState({ movies: response.data.results });
    });
  }
  return (
            <Downshift
        onChange={downshiftOnChange}
        itemToString={item => (item ? item.title : "")}
      >
        {({
          selectedItem,
          getInputProps,
          getItemProps,
          highlightedIndex,
          isOpen,
          inputValue,
          getLabelProps
        }) => (
          <div>
            <label
              style={{ marginTop: "1rem", display: "block" }}
              {...getLabelProps()}
            >
              Choose your favourite movie
            </label>{" "}
            <br />
            <input
              {...getInputProps({
                placeholder: "Search movies",
                onChange: inputOnChange
              })}
            />
            {isOpen ? (
              <div className="downshift-dropdown">
                {movie
                  .filter(
                    item =>
                      !inputValue ||
                      item.title
                        .toLowerCase()
                        .includes(inputValue.toLowerCase())
                  )
                  .slice(0, 10)
                  .map((item, index) => (
                    <div
                      className="dropdown-item"
                      {...getItemProps({ key: index, index, item })}
                      style={{
                        backgroundColor:
                          highlightedIndex === index ? "lightgray" : "white",
                        fontWeight: selectedItem === item ? "bold" : "normal"
                      }}
                    >
                      {item.title}
                    </div>
                  ))}
              </div>
            ) : null}
          </div>
        )}
      </Downshift>
  );
}

export default App;
 

Это пример кода, который я написал. Кроме того, когда я нажимаю shift home, он также не работает.

Проблема 1: когда пользователь нажал на значение внешнего текстового поля, что бы я ни искал, это исчезает.

Проблема 2: смена дом также не работает.

У кого-нибудь есть идеи, как решить эту проблему?

когда пользователь нажал на значение внешнего текстового поля, все, что я искал, исчезает.

Один из способов, которым вы могли бы это сделать, — установить stateReducer на Downshift компоненте:

Эта функция будет вызываться каждый раз, когда downshift устанавливает свое внутреннее состояние (или вызывает обработчик onStateChange для реквизитов управления). Это позволяет вам изменять изменение состояния, которое будет происходить, что может дать вам точный контроль над тем, как компонент взаимодействует с обновлениями пользователей, без необходимости использования реквизитов управления. Это дает вам текущее состояние и состояние, которое будет установлено, и вы возвращаете состояние, которое хотите установить.

состояние: Полное текущее состояние понижающей передачи.

изменения: Это свойства, которые вот — вот изменятся. У этого также есть свойство типа, о котором вы можете узнать больше в разделе Типы состояний.

 function stateReducer(state, changes) {
  switch (changes.type) {
    case Downshift.stateChangeTypes.mouseUp:
      return {
        ...changes,
        isOpen: true,
        inputValue: state.inputValue,
      };
    default:
      return changes;
  }
}
 

Таким образом, если вы нажмете за пределами текстового поля, выпадающий список останется открытым, и входное значение не будет сброшено.

Список всех типов изменений состояния см. в документации здесь

Возможно , вы также сможете заставить что-то работать, используя onBlur опору input , но у меня это не получилось.