Как правильно сделать Search компонент используя React

Question

Есть компонент Posts.jsx который содержит в себе Search.jsx, проблема в том, что я не знаю как правильно сделать компонент Search - должен ли он быть функциональный или через класс. И как передавать значения с input при нажатии на кнопку search в Posts компонент.

Posts.jsx

import React from 'react';

import { CardList } from '../../components/card-list/card-list.component';
import { Search } from '../../components/search/search.component';
import postApi from '../../services/postApi';

class PostsListPage extends React.Component {
    constructor() {
        super();

        this.state = {
            posts: [],
            search: '',
        };
    }

    componentDidMount() {
        postApi.getPosts().then(({ data }) => {
            this.setState({ posts: data.list });
        });
    }

    render() {
        const { posts, search } = this.state;

        return (
            <div className="container">
                <Search placeholder="Search post" />
                <CardList posts={posts} />
            </div>
        );
    }
}

export default PostsListPage;

Search.jsx

import React from 'react';

export const Search = ({ placeholder, handleClick }) => (
    <div className="mb-3 d-flex">
        <input type="text" className="form-control" name="search" placeholder={placeholder} />
        <button type="button" className="btn btn-primary" onClick={handleClick}>
            Search
        </button>
    </div>
);

Answer 1

В PostsListPage значение input вы храните в this.state.search. Как решение, можно добавить в PostsListPage функцию, которая делает апдейт search:

updateSearch = (value) => {
  this.setState(() => {
    return {
      search: value
    };
  }
}

Передаете эту функцию в child-компонент:

<Search placeholder="Search post" updateSearch={this.updateSearch} />

В компоненте Search вы просто вызываете функцию родителя при каждом обновлении input (в параметрах передаете значение input):

props.updateSearch(value);

БЛОГ НА HUSL

Как правильно сделать Search компонент используя React

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