Реактивная панель поиска с крючками - PullRequest
Новая
       41

Реактивная панель поиска с крючками

0 голосов
/ 24 октября 2019

В настоящее время у меня есть приложениеact-redux-application, которое позволяет выполнять операции CRUD с помощью React Hooks 16.8

Кто-нибудь знает, могу ли я добавить строку ввода текстового поиска с помощью Hooks, или мы должны использовать класскомпоненты

Ответы [ 2 ]

0 голосов
/ 24 октября 2019

Вот простой способ сделать это, отметьте его на https://codesandbox.io/s/pensive-sunset-r7sn3?fontsize=14.

function SearchBar() {
    const [searchInput, setSearchInput] = useState('');
    const handleChange = val => {
        setSearchInput(val);
    }
    return (
        <div>
            <input type="text" value={searchInput} onChange={(e) => handleChange(e.target.value)} />
        </div>
    )
}
0 голосов
/ 24 октября 2019

Следуйте этому примеру, как использовать реагирующие хуки 

 import React, { useState } from "react";

    export function SearchForm(props) {
      const [search, setInput] = useState("");

      const handleSubmit = (evt) => {
          evt.preventDefault();
          alert(`Submitting search ${search}`)
      }
      return (
        <form onSubmit={handleSubmit}>
          <label>
            Search Input
            <input
              type="text"
              value={search}
              onChange={e => setInput(e.target.value)}
            />
          </label>
          <input type="submit" value="Submit" />
        </form>
      );
    }
...