使用搜索正则表达式在反应中基于输入字段的过滤列表

Question

我正在尝试根据用户输入过滤列表。为此，我使用了搜索正则表达式来过滤掉数据，然后使用this.setState（）方法更改状态，但是当用户在输入字段中键入内容时，它应该根据它来检索列表。它没有按预期工作。有人可以建议我的代码有什么问题吗？预先感谢。

SearchBox.js

import React, { Component } from "react";
import SourceData from "../assets/continents.json";

class SearchBox extends Component {
  state = {
    value: "",
    sourceData: []
  };

  handleChange = e => {
    this.setState({
      sourceData: SourceData
    });
  };

  filterList = e => {
    const updatedList = this.state.sourceData.filter(item => {
      return item.toLowerCase().search(e.target.value.toLowerCase()) !== -1;
    });
    this.setState({ sourceData: updatedList });
  };

  render() {
    const searchBox = (
      <input
        type="text"
        onClick={this.handleChange}
        onChange={this.filterList}
      />
    );
    const selectBox = this.state.sourceData.map(option => (
      <li key={option.continent}>{option.continent}</li>
    ));

    return (
      <React.Fragment>
        <h2>Step 1</h2>
        <h3>Select a continent.</h3>
        {searchBox}
        {selectBox && <ul>{selectBox}</ul>}
      </React.Fragment>
    );
  }
}

export default SearchBox;

continents.json

[
  {
    "continent": "Africa",
    "countries": [
      {
        "name": "Nigeria",
        "flag": "ð³ð¬"
      },
      {
        "name": "Ethiopia",
        "flag": "ðªð¹"
      },
      {
        "name": "Egypt",
        "flag": "ðªð¬"
      },
      {
        "name": "DR Congo",
        "flag": "ð¨ð©"
      },
      {
        "name": "South Africa",
        "flag": "ð¿ð¦"
      }
    ]
  },
  {
    "continent": "America",
    "countries": [
      {
        "name": "USA",
        "flag": "ðºð¸"
      },
      {
        "name": "Brazil",
        "flag": "ð§ð·"
      },
      {
        "name": "Mexico",
        "flag": "ð²ð½"
      },
      {
        "name": "Colombia",
        "flag": "ð¨ð´"
      },
      {
        "name": "Argentina",
        "flag": "ð¦ð·"
      }
    ]
  },
  {
    "continent": "Asia",
    "countries": [
      {
        "name": "China",
        "flag": "ð¨ð³"
      },
      {
        "name": "India",
        "flag": "ð®ð³"
      },
      {
        "name": "Indonesia",
        "flag": "ð®ð©"
      },
      {
        "name": "Pakistan",
        "flag": "ðµð°"
      },
      {
        "name": "Bangladesh",
        "flag": "ð§ð©"
      }
    ]
  },
  {
    "continent": "Europe",
    "countries": [
      {
        "name": "Russia",
        "flag": "ð·ðº"
      },
      {
        "name": "Germany",
        "flag": "ð©ðª"
      },
      {
        "name": "UK",
        "flag": "ð¬ð§"
      },
      {
        "name": "France",
        "flag": "ð«ð·"
      },
      {
        "name": "Italy",
        "flag": "ð®ð¹"
      }
    ]
  },
  {
    "continent": "Oceania",
    "countries": [
      {
        "name": "Australia",
        "flag": "ð¦ðº"
      },
      {
        "name": "Papua New Guinea",
        "flag": "ðµð¬"
      },
      {
        "name": "New Zealand",
        "flag": "ð³ð¿"
      },
      {
        "name": "Fiji",
        "flag": "ð«ð¯"
      },
      {
        "name": "Solomon Islands",
        "flag": "ð¸ð§"
      }
    ]
  }
]

在下面的输出中，它不是过滤列表。

输出::

Answer 1

这是一个工作代码。让我知道您是否遇到任何问题：

此函数在您的代码中存在问题：

filterList = e => {
    const updatedList = this.state.sourceData.filter(item => {
      return (
        item.continent.toLowerCase().search(e.target.value.toLowerCase()) !== -1
      );
    });
    this.setState({ filterData: updatedList });
  };

基本上，您必须使用item.continent.toLowerCase()而不是item.toLowerCase()

Answer 2

import React, { Component } from "react";
import SourceData from "../assets/continents.json";

class SearchBox extends Component {
  state = {
    value: "",
    sourceData: SourceData,
    filterData: SourceData
  };

  filterList = e => {
    const updatedList = this.state.sourceData.filter(item => {
      return item.toLowerCase().search(e.target.value.toLowerCase()) !== -1;
    });
    this.setState({ filterData: updatedList });
  };

  render() {
    const searchBox = (
      <input
        type="text"
        onChange={this.filterList}
      />
    );
    const selectBox = this.state.filterData.map(option => (
      <li key={option.continent}>{option.continent}</li>
    ));

    return (
      <React.Fragment>
        <h2>Step 1</h2>
        <h3>Select a continent.</h3>
        {searchBox}
        {selectBox && <ul>{selectBox}</ul>}
      </React.Fragment>
    );
  }
}

export default SearchBox;

您可以分离主数据和过滤数据，并始终从主数据过滤列表