使用 React 将搜索过滤器添加到具有表格的手风琴

Question

我创建了一个文件，它从数据库中获取数据并使用手风琴以表格形式显示它。我想在这个文件中添加一个搜索过滤器，但是当我尝试添加它时，我的手风琴不再工作了。

感谢您的帮助。 下面是代码。

Accordion.js
class Accordion extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            posts: null,
            loading: true,
            error: null
        };
    }

    componentDidMount() {
        axios.get(`data from db`)
            .then(res => {
                const posts = res.data;
                this.setState({
                    posts,
                    loading: false,
                    error: null
                });
            })
            .catch(err => {
                this.setState({
                    loading: false,
                    error: true
                });
     });
    }

    renderLoading() {
        return (
            <div className="accordion-container">
                <h1 className="error">Loading...</h1>
            </div>
        );
    }
    renderError() {
        return (
            <div>
               error
            </div>
        );
    }
    renderPosts() {
        const { posts, loading, error } = this.state;
        if (error) {
            this.renderError();
        }

        return (
            // <div className="accordion-container">
            //     <h1>Accordion Component</h1>
            <div>
                  <Table style={{tableLayout:"fixed",backgroundColor:"#D9D9E7"}}>
              <TableHead >
                  <TableRow >
                      <TableCell style={{width:'20px'}}></TableCell>
                      <TableCell style={{fontWeight: "bold"}} >NAME</TableCell>
                      <TableCell style={{fontWeight: "bold"}} >LEVEL</TableCell>
                      <TableCell style={{fontWeight: "bold"}} >EMPLOYEE ID</TableCell>
                      <TableCell style={{fontWeight: "bold"}} >ENTERPRISE ID</TableCell>
                      <TableCell style={{fontWeight: "bold"}} >PROJECT NAME</TableCell>
                      <TableCell style={{fontWeight: "bold"}} >PROJECT MANAGER</TableCell>
                      <TableCell style={{fontWeight: "bold"}} >WORK LOCATION</TableCell>                
                   </TableRow>
              </TableHead>
              </Table>
                <div>
                {posts.map(post =>
                    <Section post={post} key={post.employeeid} />
                )}
            </div>
            </div>
        );
    }
    render() {
        const { loading } = this.state;
        return (
            <div>
                {loading ? this.renderLoading() : this.renderPosts()}
            </div>
        );
    }
}

Section.js

    class Section extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                open: false,
                className: 'accordion-content accordion-close',
                headingClassName: 'accordion-heading'
            };

            this.handleClick = this.handleClick.bind(this);
        }
        handleClick() {
            const { open } = this.state;

            if (open) {
                this.setState({
                    open: false,
                    className: "accordion-content accordion-close",
                    headingClassName: "accordion-heading"
                });
            } else {
                this.setState({
                    open: true,
                    className: "accordion-content accordion-open",
                    headingClassName: "accordion-heading clicked"
                });
            }
        }
        render() {
            const post = this.props.post;
            const { className } = this.state;
            const { headingClassName } = this.state;
            console.log(headingClassName);
            return (
                <div>

                    <div className="parent-accordion">


                        <div className={headingClassName} onClick={this.handleClick}>
                            {/* {post.name} */}

                            <Table>
                                <TableBody>
                                    <TableRow>
                                        <TableCell>{post.name}</TableCell>
                                        <TableCell>{post.level}</TableCell>
                                    </TableRow>
                                </TableBody>
                            </Table>


                        </div>
                        <div className={className}>

                             <Table>
                            <TableBody>
                                <TableRow>
                                    <TableCell ><div style={{ fontSize: '12px', fontWeight: 'bold' 
 }}>Primary Skill</div><br />{post.primaryskill}</TableCell>
                                    <TableCell ><div style={{ fontSize: '12px', fontWeight: 'bold' 
 }}>Gender</div><br />{post.gender}</TableCell>
                        </div>

                    </div>
                </div>
            );
        }
    }

我尝试使用互联网上显示的搜索过滤器，但这不适用于我的代码。 基本上，该表显示了数据库中的数据。单击数据列（例如名称）后，手风琴将打开并显示更多详细信息。

Answer 1

您可以使用两种状态，一种用于存储您从 axios 调用中获得的所有数据，另一种用于过滤：

步骤：

再添加两种状态，一种用于您使用的文本，另一种用于结果：

this.state = {
    posts: null,
    filteredPosts: null,
    filtersSearch: '',
    loading: true,
    error: null
};

当您执行 axios 时，也要设置过滤后的帖子：

componentDidMount() {
    axios.get(`data from db`)
        .then(res => {
            const posts = res.data;
            this.setState({
                posts,
                filteredPosts: posts,
                loading: false,
                error: null
            });
        })
        .catch(err => {
            this.setState({
                loading: false,
                error: true
            });
 });
}

创建一个设置过滤帖子的函数：

filterPosts = (e) => {
    const value = e.target.value;
    const filteredPosts = this.state.posts.filter((post) => post.name.includes(value);

    this.setState({
        filteredPosts,
        filtersSearch: value
    );
}

使用输入过滤：

<input onChange={(e) => this.filterPosts(e)}

为过滤后的帖子更改帖子：

{filteredPosts.map(post =>
     <Section post={post} key={post.employeeid} />
)}