时间戳

首页 > 解决方案 > 如何在 ReactJS 中创建搜索字段

reactjs - 如何在 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));
            })
        }
    }

    componentWillMount() {
        this.getData();
    }
    render() {
        return (
            <div className="searchForm">
                <form>
                    <input type="text" id="filter" placeholder="Search for..." ref={input => this.search = input} onChange={this.handleInputChange}/>
                </form>
                <div>
                    {
                        this.state.data.map((i) =>
                            <p>{i.name}</p>
                        )
                    }
                </div>
            </div>
        )
    }
}


export default BodyData;

所以基本上，我想在输入查询文本时更新状态，并减少我映射的餐厅名称，直到找到匹配项。

据我了解，this.state.data将在我在搜索栏中输入查询时进行过滤。但是，当我绘制地图时this.state.data，我得到的是整个餐厅列表，而不是我想看到的。

我已经经历了一堆 tutes，我不完全确定如何去做。

任何人都可以帮我解决这个问题吗？也欢迎对代码提出任何其他意见。我是来学习的：）

谢谢！

标签： reactjs

解决方案

您可以保留一个名为 eg 的附加状态，其中包含名称中包含您的filteredData所有元素，然后渲染它。dataquery

例子

class BodyData extends React.Component {
  state = {
    query: "",
    data: [],
    filteredData: []
  };

  handleInputChange = event => {
    const query = event.target.value;

    this.setState(prevState => {
      const filteredData = prevState.data.filter(element => {
        return element.name.toLowerCase().includes(query.toLowerCase());
      });

      return {
        query,
        filteredData
      };
    });
  };

  getData = () => {
    fetch(`http://localhost:4000/restaurants`)
      .then(response => response.json())
      .then(data => {
        const { query } = this.state;
        const filteredData = data.filter(element => {
          return element.name.toLowerCase().includes(query.toLowerCase());
        });

        this.setState({
          data,
          filteredData
        });
      });
  };

  componentWillMount() {
    this.getData();
  }

  render() {
    return (
      <div className="searchForm">
        <form>
          <input
            placeholder="Search for..."
            value={this.state.query}
            onChange={this.handleInputChange}
          />
        </form>
        <div>{this.state.filteredData.map(i => <p>{i.name}</p>)}</div>
      </div>
    );
  }
}

推荐阅读