Реализация поиска на ReactJs?

Question

[Andrew Chil]

Всем привет! Помогите пожалуйста с реализацией поиска на ReactJs!
Создаю новый компонент с input search, в него передаю объект из другого компонента, в котором есть весь текст, фильтрую его при change input, получаю блок с нужным текстом то есть, все есть! Вопрос как и что мне передать в компонент с текстом, чтобы отображать отфильтрованный текст?
Буду очень благодарен!

Answer 1

[Risent Veber]

 Используйте какой-нибудь внешний event emmiter (например хранящий два поля - строка поиска и результаты), на изменения которого подписываются ваши компоненты, и выполняют setState исходя из соответсвующих значений этого объекта. Еще лучше посмотрите в сторону Redux - redux.js.org

Answer 2

[Максим]

Что передавать - зависит от реализации рендера в вашем компоненте. Но если вы берете "весь текст" и фильтруете, то первое что приходит в голову - передавать "отфильтрованный текст".

Если без "flux/redux/..." то с помощью событийной модели (например, в момент поиска происходит событие "поиск_изменен", а компонент где был весь этот текст слушает данное событие и рендерит только часть отфильтрованную, так как вы ее передали. Если не передали - рендерит все (как будто поиска не было, или поиск пустой))

Если с flux/redux/... то действуйте в рамках подхода. Если говорить про redux - то просто отправьте action с фильтрованным "куском".

Comments

[Andrew Chil]

У меня данные хранятся в localStorage, мне по нему делать поиск и удалять не нужное? Если да, то как хранить предыдущое состояние компонента?

[Максим]

как вы храните данные - это другой вопрос, конечно... Но, можете сделать как советуют в еще одном ответе: хранить строку поиска и результаты для нее (заодно можно и мемоизацию (выборку данных из кэша, так как у вас уже будет результат для текущей поисковой строки) использовать).