функциональность панели поиска, как сделать так, чтобы переменная сохранялась - PullRequest
Новая
       3

функциональность панели поиска, как сделать так, чтобы переменная сохранялась

1 голос
/ 10 июля 2020

Я пытаюсь создать панель навигации, которая будет искать видео. Идея состоит в том, чтобы извлечь массив заголовков видео и отфильтровать их, используя вводимые пользователем данные из панели поиска. Проблема в том, что я не могу сохранить searchItem. При перенаправлении на / search searchItem не является частью реквизита. Есть предложения? 

import React from "react";
import { Link } from 'react-router-dom';


class SearchBar extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            searchItem: ""
        };
        this.update = this.update.bind(this);
        this.handleSearch = this.handleSearch.bind(this);
    }

    update() {
        return e => this.setState({ searchItem: e.currentTarget.value });
    }

    handleSearch() {
        // debugger
        // e.preventDefault();
        console.log(this.state.searchItem)
        console.log(this.state)
        // this.props.location.search = this.searchItem;
    }

    render() {

        return (
            <div className="search-form">
                <form onSubmit={this.handleSearch()}>
                    <input type="text"
                        className="search-input"
                        placeholder="Search videos"
                        value={this.state.searchItem}
                        onChange={this.update()}
                    />
                    <button id="search-button">
                        <Link to="/search"><img id="search-icon" src="https://image.flaticon.com/icons/svg/49/49116.svg" alt="" /></Link>
                    </button>
                </form>
            </div>
        );
    }
}

export default SearchBar;

class Search extends React.Component {

    constructor(props) {
        super(props);
        console.log(this.props)
    }


    componentDidMount() {
        this.props.fetchVideos();
        this.props.fetchUsers();
    };

1 Ответ

1 голос
/ 10 июля 2020

Условия поиска часто сохраняются путем добавления их к URL-адресу в качестве параметров, таких как mysite.com/search?search=foo. Вы также можете использовать локальное хранилище или файлы cookie, но эти параметры могут ослабить навигацию в браузере.

В вашей функции рендеринга установите <Link to={``/search?search=${this.state.searchItem}``} ...

Затем в конструкторе вы можете выбрать, как чтобы получить параметр запроса из URL-адреса. В библиотечной строке запроса есть инструменты для облегчения этого, или вы можете написать свой собственный, например, вот так Как получить значение из параметров GET? . Как только он у вас есть, вы можете инициализировать состояние с его помощью.

...