@Cetch
Learn to be FRONT-END

Как сделать фильтрацию постов на React?

Имеется форма, в которой пользователь должен вбивать информацию, эта форма при каждом своём изменении передаёт данные вверх по иерархии, как сделать так, чтобы при изменении формы фильтровались посты на странице?

Home.jsx(Компонент, который стоит выше по иерархии)
Code #1
import React, {Component} from 'react';

import db from '../db';

import Nav from '../components/Nav';
import Header from '../components/Header';
import SearchBar from '../components/SearchBar';
import Posts from '../components/Posts';
import Footer from '../components/Footer';

export default class Home extends Component{
    constructor(props){
        super(props);
        this.handleUserInput = this.handleUserInput.bind(this);
        this.state = {
            filterText: ''
          };
    }
  handleUserInput(filterText) {
    this.setState({filterText: filterText}, ()=>{console.log("State: " + this.state.filterText)});
  }
    render(){
    return(
        <div className="App">
            <Nav/>
            <Header/>
            <SearchBar
                filterText={this.state.filterText}
                onUserInput={this.handleUserInput}/>
            <Posts handleUserIput={this.state.filterText} data={db}/>
            <Footer/>
        </div>
    );
}
}
SearchBar.jsx(компонент с формой)
Code #2
import React, {Component} from 'react';

export default class SearchBar extends Component{
    constructor(props){
        super(props);
        this.handleChange = this.handleChange.bind(this);

    }
    handleChange(){
        this.props.onUserInput(
            this.filterTextInput.value,
        );
    }
    render(){
        return(
            <div className="searchbar">
                <div id="search-box">
                    <input 
                    id="term" 
                    type="text" 
                    placeholder="Search..." 
                    value={this.props.filterText} 
                    ref={(input) => this.filterTextInput = input}
                    onChange={this.handleChange}/>

                    <label className="screen-reader" htmlFor="term"><i className="fa fa-search"></i></label>
                </div>
            </div>
        );
}
}
Posts.jsx(компонент, в котором нужно фильтровать посты)
Code #3
import React, {Component} from 'react';

import Post from './Post';

export default class Posts extends Component{
    render(){
        return(
            <section className="s-posts">
                <div className="container">
                    <div className="row">
                        {
                            this.props.data.map(data =>
                                <Post key={data.id} title={data.title} img={data.img}  descr={data.descr}/>
                        )
                        }
                    </div>
                </div>
            </section>
        );
    }
}
  • Вопрос задан
  • 102 просмотра
Решения вопроса 2
0xD34F
@0xD34F
Список постов - это db, да? Ну так и фильтруйте его перед передачей в Posts. Например, так:
render(){
  const
    text = this.state.filterText,
    posts = text ? db.filter(n => n.descr.includes(text)) : db;

  return(
    <div className="App">
      <Nav/>
      <Header/>
      <SearchBar
        filterText={this.state.filterText}
        onUserInput={this.handleUserInput}/>
      <Posts handleUserIput={this.state.filterText} data={posts}/>
      <Footer/>
    </div>
  );
}
Ответ написан
@vshvydky
видимо не готов ты еще раз не можешь такое тестовое задание решить
у тебя есть серч компонент и колбек который идет от ончендж меняет стейт который передается как в серч так и в постс, тебе надо просто использовать правила фильтрации в постс
{
                            !this.handleUserIput ? this.props.data.map(data =>
                                <Post key={data.id} title={data.title} img={data.img}  descr={data.descr}/>
                        ) : 
                         this.props.data.filter(data=>data.title===this.handleUserIput).map(data =>
                                <Post key={data.id} title={data.title} img={data.img}  descr={data.descr}/>
                        )}

чет типо такого
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы