如何根据 REACT JS 中的文本输入从 API 搜索 [重复]

Posted 2023-02-22

【中文标题】如何根据 REACT JS 中的文本输入从 API 搜索 [重复]

【英文标题】：How to search from API based on text input in REACT JS [duplicate]

【发布时间】：2018-08-20 21:03:31

【问题描述】：

当我根据关键字从 API 搜索时，我会在 API 中获取所有详细信息。 我只需要根据搜索中的文本输入获取详细信息.. 我不知道问题出在我的 API 或我的代码中... 请帮帮我..

import React,  Component  from 'react';

class Search extends Component 
    constructor(props) 
        super(props);
        this.state=
            value:'',
            value2:''                                                                                                           
        ;
    this.handleChange=this.handleChange.bind(this);
    this.crimeChange=this.crimeChange.bind(this);
    this.search=this.search.bind(this);

    
    handleChange(event)
        this.setState(value:event.target.value);
    

    crimeChange(event) 
        this.setState(value2:event.target.value);
    
    search()
        let value, value2  =this.state;
        const url=`https://api.myjson.com/bins/e69i9/?i=$value&q=$value2`;

        fetch(url,
            method:'GET'
        ).then(response => response.json())
        .then(json =>console.log('details',json));
    

    render() 
        return (
            <div>
                <form >
                    <div className="row">
                        <div className="col-md-4">

                            <select value=this.state.value onChange=this.handleChange className="form-control" placeholder="police station">
                            <option selected>Choose...</option>
                                <option value="areacode">Areacode</option>
                                <option value="changaramkulam">Changaramkulam</option>
                                <option value="edakkara">Edakkara</option>
                                <option value="edavanna">Edavanna</option>
                                <option value="kadampuzha">Kadampuzha</option>
                                <option value="kalikavu">Kalikavu</option>
                                <option value="kalpakanchery">Kalpakanchery</option>
                                <option value="karipur">Karipur</option>
                                <option value="karuvarakundu">Karuvarakundu</option>
                                <option value="kolathur">Kolathur</option>
                                <option value="kondotty">Kondotty</option>
                                <option value="kottakkal">Kottakkal</option>
                                <option value="kuttippuram">Kuttippuram</option>
                                <option value="malappuram">Malappuram</option>
                                <option value="manjeri">Manjeri</option>
                                <option value="mankada">Mankada</option>
                                <option value="melattur">Melattur</option>
                                <option value="nilambur">Nilambur</option>
                                <option value="pandikkad">Pandikkad</option>
                                <option value="parapanangadi">Parapanangadi</option>
                                <option value="perinthalmanna">Perinthalmanna</option>
                                <option value="perumpadappu">Perumpadappu</option>
                                <option value="ponnani">Ponnani</option>
                                <option value="pookottumpadam">Pookkottumpadam</option>
                                <option value="pothukkal">Pothukkal</option>
                                <option value="thanur">Thanur</option>
                                <option value="thenhipalam">Thenhipalam</option>
                                <option value="thirurangadi">Thirurangadi</option>
                                <option value="tirur">Tirur</option>
                                <option value="valanchery">Valanchery</option>
                                <option value="vazhakad">Vazhakad</option>
                                <option value="vazhikadavu">Vazhikadavu</option>
                                <option value="vengara">Vengara</option>
                                <option value="vandoor">Vandoor</option>
                            </select>
                        </div>
                        <div className="col-md-4">
                            <div className="form-group is-empty">
                                <input type="number" placeholder="Crime Number" className="form-control" value=this.state.value2 onChange=this.crimeChange/>
                                <span className="material-input"></span></div>
                        </div>

                        <div className="col-md-4">
                            <button type="button" 
                            className="btn btn-primary btn-block"
                            onClick=()=> this.search()
                            >Search</button>
                        </div>
                    </div>
                </form>
            </div>
        )
    

export default Search; 

这是我的 api 数据

// 20180312234820 //https://api.myjson.com/bins/e69i9/

[
  
    "id": 1,
    "police station": "perinthalmanna",
    "crime number": 97,
    "details": 
      "image": "http: //asianetindia.com/wp-content/uploads/2013/09/jayanandan.jpg",
      "name": "john",
      "section of law": "IPC200",
      "type of person": "missed"
    
  ,
  
    "id": 2,
    "police station": "tirur",
    "crime number": 98,
    "details": 
      "image": "https: //themmindset.files.wordpress.com/2010/10/chota-shakeel.jpg",
      "name": "mohan",
      "section of law": "Ipc407",
      "type of person": "suspects"
    
  ,
  
    "id": 3,
    "police station3": "ponnani",
    "crime number": 99,
    "details": 
      "image": "https://themmindset.files.wordpress.com/2010/10/mukhtar_ansari.jpg",
      "name": "rooney",
      "section of law": "ipc207",
      "type of person": "criminals"
    
  ,
  
    "id": 4,
    "police station": "kolathur",
    "crime number": 100,
    "details": 
      "image": "https://themmindset.files.wordpress.com/2011/04/abu_salem.jpg",
      "name": "tipper vasu",
      "section of law": "Ipc408",
      "type of person": "missed"
    
  ,
  
    "id": 5,
    "police station": "kottakkal",
    "crime number": 101,
    "details": 
      "image": "https://themmindset.files.wordpress.com/2011/04/abu_salem.jpg",
      "name": "killer",
      "section of law": "Ipc402",
      "type of person": "suspected"
    
  
]

这个概念是... 如果我选择警察局和犯罪号码，那么将根据 API 获取详细信息...

请帮帮我..

【参考方案1】：

search()
        let value, value2, searchTerm  =this.state;
        const url=`https://api.myjson.com/bins/e69i9/?i=$value&q=$value2`;

        fetch(url,
            method:'GET'
        ).then(response => response.json())
        .then(json =>console.log('details',json.filter(item => item["police station"].includes(searchTerm) || item["crime number"].includes(searchTerm)));
    

在渲染方法中添加输入

<input placeholder="search" onChange=(e) => this.setState( searchTerm: e.target.value )

现在您可以按 id 进行搜索了。