Фильтр поиска в React / JS

Question

Я использую React to map для набора данных, отображаемых в карточках на странице. Я пытаюсь реализовать функцию поиска / фильтрации, чтобы, когда пользователь вводит слово «бицепс», он видел только карточки, содержащие слово «бицепс». В идеале я бы хотел обыскать всю карту, включая описание. Независимо от того, что я пытаюсь, я не могу заставить панель поиска влиять на карточки. Я не получаю сообщений об ошибках, но когда я ищу что-либо, ни одна из карточек не отфильтровывается, даже если они не содержат поискового запроса.

Вот ссылка CodeSandbox . Функция поиска, которую я пытаюсь использовать, приведена ниже:

function mySearchFunction() {
  var input, filter, div, dl, a, i, txtValue;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  div = document.getElementById("myDiv");
  dl = div.getElementsByTagName("dl");
  for (i = 0; i < dl.length; i++) {
    a = dl[i].getElementsByTagName("span")[1];
    txtValue = a.textContent || a.innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      dl[i].style.display = "";
    } else {
      dl[i].style.display = "none";
    }
  }
}

Я новичок в Javascript, поэтому, если есть другая функция / функция, которую вы бы порекомендовали, я, вероятно, просто не знаю еще, и я открыт для всего, пока он использует хуки вместо классов, и имейте в виду, что я все еще изучаю это, поэтому я пытаюсь делать что-то по одному шагу за раз (т.е. я не Я ничего не знаю о Angular или Vue или других интерфейсных фреймворках, отличных от React).

Answer 1

Вы можете добиться этого, например:

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

Смайлы отображаются с помощью filter ( u должен обрабатывать здесь поиск без учета регистра и c ..), и они отображаются на объект ur.

Вот код на CodeSandbox

function App() {
  const [filter, setFilter] = useState("");

  return (
    <div>
      <h1>
        <span>emojipedia</span>
      </h1>

      <input
        type="text"
        id="myInput"
        onChange={e => setFilter(e.target.value)}
        placeholder="Search for names.."
      />

      <div id="myDiv">
        <dl className="dictionary">
          {emojipedia
            .filter(emoji => {
              return (
                emoji.name.includes(filter) || emoji.meaning.includes(filter)
              );
            })
            .map(createEntry)}
        </dl>
      </div>
    </div>
  );
}

Answer 2

import React, {useState} from "react";
import Entry from "./Entry";
import emojipedia from "../emojipedia";

function App() {
  const [results, setResults] = useState([])

  function mySearchFunction(value) {
    const results = emojipedia.filter(emoji => emoji.name.replace(/ /g,'').toLowerCase().includes(value.toLowerCase()))
    setResults(results)
  }

  return (
    <div>
      <h1>
        <span>emojipedia</span>
      </h1>

      <input
        type="text"
        id="myInput"
        onChange={e => mySearchFunction(e.target.value)}
        placeholder="Search for names.."
      />

      <div id="myDiv">
        <dl className="dictionary">
        {
          results.length === 0 ? 'no results' : results.map(result => {
            return <Entry key={result.id}
                          emoji={result.emoji}
                          name={result.name}
                          description={result.meaning} />
                        })
          }
          </dl>
      </div>
    </div>
  );
}

export default App;

Answer 3

Для работы вам необходимо внести следующие изменения в код.

1. Вам нужно добавить состояние в компонент и использовать useState.
2. Я добавил onChange eventHandler для обработки изменения ввода.
3. Перепишите метод фильтра, чтобы фильтровать данные на основе свойства name. Вы можете сделать его обобщенным c, передав свойство того, что вы хотите фильтровать данные.
4. Привязал переменную состояния emojis в JSX, чтобы он повторно отображал компонент при изменении состояния.

Вот рабочее решение: https://codesandbox.io/s/emoji-site-nc81j?file= / src / components / App.jsx

См. код ниже

function App() {
  const [emojis, setEmojis] = useState(emojipedia);

  function mySearchFunction(event) {
    var tempData = emojipedia.slice();
    tempData = tempData.filter(
      data => data.name.indexOf(event.target.value) > -1
    );
    setEmojis(tempData);
  }

  function createEntry(emojiTerm) {
    return (
      <Entry
        key={emojiTerm.id}
        emoji={emojiTerm.emoji}
        name={emojiTerm.name}
        description={emojiTerm.meaning}
      />
    );
  }

  return (
    <div>
      <h1>
        <span>emojipedia</span>
      </h1>

      <input
        type="text"
        id="myInput"
        onChange={mySearchFunction}
        placeholder="Search for names.."
      />

      <div id="myDiv">
        <dl className="dictionary">{emojis.map(createEntry)}</dl>
      </div>
    </div>
  );
}

export default App;