主页 / 问题 / 1162783
Accepted
dmitriy
Asked:2020-08-06 17:11:41 +0000 UTC2020-08-06 17:11:41 +0000 UTC

如何使用 React 正确制作搜索组件

  • 772

有一个包含 Search.jsx 的 Posts.jsx 组件，问题是我不知道如何正确地制作 Search 组件——它应该是功能性的还是通过一个类。以及点击 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;

搜索.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>
);
reactjs

1 个回答

  1. Best Answer

    在PostsListPage您存储在 this.state.search 中的输入值中。作为解决方案，您可以添加到PostsListPage执行搜索更新的功能：

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

    将此函数传递给子组件：

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

    在组件中，Search您只需在每次更新输入时调用父函数（在参数中传递输入值）：

    props.updateSearch(value);
    • 0

相关问题