ReactStrap Дескриптор ввода Неявная отправка - PullRequest
Новая
       35

ReactStrap Дескриптор ввода Неявная отправка

0 голосов
/ 12 декабря 2018

Всякий раз, когда я нажимаю Enter, когда фокусируюсь на текстовом поле ввода, неявная отправка из элемента ввода запускает отправку и перезагружает страницу: 

import React, { Component } from "react";
import { Col, Button, Form, FormGroup, Label, Input } from "reactstrap";
import "./SearchBar.css";

class SearchBar extends Component {
constructor(props) {
    super(props);
    this.state = {
      term: ""
    };

    this.handleTermChange = this.handleTermChange.bind(this);
    this.handleSearch = this.handleSearch.bind(this);
    this.handleEnter = this.handleEnter.bind(this);
}

handleTermChange(e) {
    this.setState({ term: e.target.value });
}

handleSearch() {
    this.props.searchEngine(this.state.term);
}

handleEnter(e) {
    if (e.key === 13) {
      this.handleSearch();
    }
}

render() {
    return (
    <Form className="searchbox">
        <FormGroup row>
        <Label for="searchId" sm={2}>
            Search Engine
        </Label>
        <Col sm={10}>
            <Input
            type="text"
            placeholder="Enter Sth"
            onChange={this.handleTermChange}
            onKeyDown={this.handleEnter}
            />
        </Col>
        </FormGroup>

        <FormGroup>
        <Col sm="2">
            <div className="">
            <Button
                onClick={this.handleSearch}
                className="btn"
            >
                Submit
            </Button>
            </div>
        </Col>
        </FormGroup>
    </Form>
    );
}
}

export default SearchBar;

Я просто хочу вызвать функцию поиска с помощью обработчикакак указано выше, но избегайте неявной отправки, т. е. той же функции при нажатии на кнопку Submit.Иначе это просто перезагрузить страницу и вымыть возвращенный результат.

Что я сделал не так?Я не сталкивался с этой проблемой в основном с тем же шаблоном раньше.

Зависимости:

  • "Reactionstrap": "^ 6.5.0"
  • "bootstrap": «^ 4.1.3»
  • «реагировать»: «^ 16.6.3»
  • «реагировать»: «^ 16.6.3"
  • "реагировать-сценарии ":" 2.1.1 "

Ответы [ 2 ]

0 голосов
/ 13 декабря 2018

Я обнаружил, что это элемент <Form>, который запускает неявную отправку.Я изменяю его на <Form className="searchbox" onSubmit={this.handleSubmit}> и добавляю новую функцию: 

handleSubmit(e) { 
    e.preventDefault(); 
    this.handleSearch();
}

Полный рабочий код, измененный из вопроса: 

import React, { Component } from "react";
import { Col, Button, Form, FormGroup, Label, Input } from "reactstrap";
import "./SearchBar.css";

class SearchBar extends Component {
constructor(props) {
    super(props);
        this.state = {
            term: ""
        };

    this.handleTermChange = this.handleTermChange.bind(this);
    this.handleSearch = this.handleSearch.bind(this);
    this.handleEnter = this.handleEnter.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleTermChange(e) {
        this.setState({ term: e.target.value });
    }

    handleSearch() {
        this.props.searchEngine(this.state.term);
    }

    handleEnter(e) {
        if (e.key === 13) {
        this.handleSearch();
        }
    }

    handleSubmit(e) {
        e.preventDefault();
        this.handleSearch();
   }

render() {
    return (
    <Form className="searchbox" onSubmit={this.handleSubmit}>
        <FormGroup row>
        <Label for="searchId" sm={2}>
            Search Engine
        </Label>
        <Col sm={10}>
            <Input
            type="text"
            placeholder="Enter Sth"
            onChange={this.handleTermChange}
            onKeyDown={this.handleEnter}
            />
        </Col>
        </FormGroup>

        <FormGroup>
        <Col sm="2">
            <div className="">
            <Button
                onClick={this.handleSearch}
                className="btn"
            >
                Submit
            </Button>
            </div>
        </Col>
        </FormGroup>
    </Form>
    );
}
}

export default SearchBar;
0 голосов
/ 12 декабря 2018

Вам нужно предотвратить событие по умолчанию при нажатии клавиши Enter.

handleEnter(e) {
    if (e.key === 13) {
     e.preventDefault();
     this.handleSearch();
    }
}

e.preventDefault() сообщает агенту пользователя, что если событие не обрабатывается явно, его действие по умолчанию не должно выполняться, как обычно.

...