Как избавиться от "живой" фильтрации при вводе текста? React-redux

Question

Нужна помощь. Есть компонент, который представляет из себя простую форму с инпутом и кнопкой. С инпута значение попадает в store, а кнопка меняет URL.

Проблема в том, что фильтр в инпуте срабатывает по каждой новой букве, а должен сработать только после нажатия на кнопку. Может кто сталкивался с таким?

Вот код, если будет нужен остальной, то дам ссылку на гитхаб.

import React, { useEffect } from 'react';
import { connect } from 'react-redux';
import { filterFlight } from "../flights.actions";
import { filterTextSelector } from "../flights.selectors";

import qs from 'qs';
import { Link, useLocation } from 'react-router-dom';

const SearchFlightInput = ({ filteredTextFlight, filterFlight }) => {

  const { search, pathname } = useLocation();
  const direction = pathname === '/' ? '/departures' : pathname;
  const soughtFlight = qs.parse(search, { ignoreQueryPrefix: true }).found;


  useEffect(() => {
    if (soughtFlight) {
      filterFlight(soughtFlight)
    }
  }, [search])

  return (
    <div className="filter">
      <form >
        <input
          type="text"
          // defaultValue={filteredTextFlight}
          // id="input"
          value={filteredTextFlight}
          onChange={e => filterFlight(e.target.value)}
        />

        <Link to={`${direction}?found=${filteredTextFlight}`}>
          <button
            // onClick={e => filterFlight(e.target.value)}
            type="submit"
          >Search</button>
        </Link>

      </form>
    </div>
  )
}

const mapState = state => {
  return {
    filteredTextFlight: filterTextSelector(state)
  }
}

const mapDispatch = {
  filterFlight
}

export default connect(mapState, mapDispatch)(SearchFlightInput);

Answer 1

уберите из input onChange и value, а на форму повесьте onSubmit. Для получения значения из input повесьте на него ref или посмотрите в сторону пакета react-hook-form, вариант с document.querySelector тоже сойдет

Answer 2

задача решена таким образом:

import React, { useEffect, useState } from 'react';
import { connect } from 'react-redux';
import { filterFlight } from "../flights.actions";
import { filterTextSelector } from "../flights.selectors";

import qs from 'qs';
import { Link, useLocation } from 'react-router-dom';

const SearchFlightInput = ({ filterFlight }) => {

  const [filteredTextFlight, setName] = useState('');
  const { search, pathname } = useLocation();

  const direction = pathname === '/' ? '/departures' : pathname;
  const soughtFlight = qs.parse(search, { ignoreQueryPrefix: true }).found;


  useEffect(() => {
    if (soughtFlight) {
      filterFlight(soughtFlight)
    }
  }, [search])


  const handleSubmit = e => {
    e.preventDefault();
  }

  return (
    <div className="filter">
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          value={filteredTextFlight}
          onChange={e => setName(e.target.value)}
        />
        <Link to={`${direction}?found=${filteredTextFlight}`}>
          <button
            type="submit"
          >Search</button>
        </Link>
      </form>
    </div>
  )
}

const mapState = state => {
  return {
    filteredTextFlight: filterTextSelector(state)
  }
}

const mapDispatch = {
  filterFlight
}

export default connect(mapState, mapDispatch)(SearchFlightInput);

БЛОГ НА HUSL

Как избавиться от "живой" фильтрации при вводе текста? React-redux

Ответы (2 шт):