小编jer*_*ome的帖子

如何在 ReactJS 中创建搜索字段

我刚开始反应,我正在做一个小项目,该项目使用搜索栏来查找我从数据库中获取的数据。

该组件的代码如下:

import React, { Component } from 'react';

class BodyData extends Component {
    state = {
        query: '',
        data: [],
    }

    handleInputChange = () => {
        this.setState({
            query: this.search.value
        })
        this.filterArray();
    }

    getData = () => {
        fetch(`http://localhost:4000/restaurants`)
        .then(response => response.json())
        .then(responseData => {
            // console.log(responseData)
            this.setState({
                data:responseData
            })
        })
    }

    filterArray = () => {
        var searchString = this.state.query;
        var responseData = this.state.data
        if(searchString.length > 0){
            // console.log(responseData[i].name);
            responseData = responseData.filter(l => {
                console.log( l.name.toLowerCase().match(searchString));
            })
        }
    } …
Run Code Online (Sandbox Code Playgroud)

reactjs

9
推荐指数
2
解决办法
5万
查看次数

标签 统计

reactjs ×1