0

Есть компонент 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>
);

1 ответ 1

0

В 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);
2
  • Я не совсем понимаю как в компоненте search связать Input и отправку value с инпута в родительский компонент
    – dmitriy
    6 авг 2020 в 9:58
  • @dimafront, на input вешаете событие onChange <input type="text" onChange={onChange} .../> . В компоненте Search описываете функцию onChange, в которой будете вызывать props.updateSearch(value);
    – azlov
    6 авг 2020 в 10:01

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.