Как изменить стиль отправки формы на нажатие и ввод - PullRequest
Новая
       20

Как изменить стиль отправки формы на нажатие и ввод

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

Я построил панель поиска внутри панели навигации. Кнопка - это увеличительное стекло внутри строки поиска. Я переместил его внутрь поля ввода, используя CSS. Все работает, если кнопка нажата. Текст очищается, отображается страница / search и отображается индекс поиска. Когда я нажимаю клавишу ВВОД, текст поиска очищается, но ничего больше. Я добавил две функции searchKeyPress (e) и handleSearch (), ни одна из которых не работает. Как сделать поиск при вводе? 

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 });
    }

    searchKeyPress(e) {
        e = e || window.event;
        if (e.keyCode == 13) {
            document.getElementById('search-button').click();
            return false;
        }
        return true;
    }

    handleSearch() {   
        document.getElementById("search-input")
            .addEventListener("keydown", function (event) {
            // event.persist();
            if (event.keyCode === 13) {
                document.getElementById("search-button").click();
            }
        });
        this.setState( {
            searchItem: "",
        })
    };

    render() {

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

export default SearchBar;

введите описание изображения здесь

Ответы [ 3 ]

0 голосов
/ 13 июля 2020

Попробуйте следующее: 

<form onSubmit={this.handleSubmit}>

handleSubmit = (e) => {
  e.preventDefault();  // Hold the form submit
  // get the updated state here and do what ever you want with that state
}

Объяснение: При изменении ввода вы уже обновляете значение в состоянии, используя метод update. Таким образом, вам просто нужно обработать отправку формы (либо щелчком кнопки ввода, либо щелчком мыши по кнопке отправки), и с помощью этого метода вы можете получить обновленное состояние и использовать его по-своему для вызова api et c . И при этом вам не нужны методы handleSearch и searchKeyPress.

0 голосов
/ 13 июля 2020

Я думаю, вам следует выполнить событие onSubmit в форме, так же, как вы делали onClick для элемента кнопки.

0 голосов
/ 13 июля 2020

Для этой проблемы input type = "search" решает проблему. Если ваш тип ввода - поиск, он будет отправлять запрос при нажатии клавиши ввода и вводе фокусировки.

...