如何基于REACT中的文本输入从API搜索 [英] How to search from API based on text inputs in REACT
本文介绍了如何基于REACT中的文本输入从API搜索的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
当我基于关键字从API搜索时，我会获得API中的所有详细信息.我只需要根据搜索中输入的文本获得详细信息.我不知道问题出在我的API或我的代码中……请帮助我.
when i search from API based on keyword,i get all details in API. i need get only details based on the text input from search.. i dont know the problem is in my API or My code... please help me..
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/
// 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中获得基于该名称的详细信息...
the concept is ... if i select a policestation and crime number,then will get details based on that from API...
请帮助我..
推荐答案
这是允许对响应中的数据进行多次过滤的工作代码.结果显示在控制台中.
Here is the working code that allows multiple filtering of data from the response.The result is shown in the console.
class TestJS extends React.Component {
constructor(props) {
super(props);
this.state={
value:'',
value2:'',
resultFound : false,
filteredData : ""
};
this.handleChange=this.handleChange.bind(this);
this.crimeChange=this.crimeChange.bind(this);
this.search=this.search.bind(this);
this.multiFilter=this.multiFilter.bind(this);
}
multiFilter(array, filters) {
const filterKeys = Object.keys(filters);
// filters all elements passing the criteria
return array.filter((item) => {
// dynamically validate all filter criteria
return filterKeys.every(key => !!~filters[key].indexOf(item[key]));
});
}
handleChange(event){
this.setState({value:event.target.value});
}
crimeChange(event) {
this.setState({value2:event.target.value});
}
search(){
let _this = this;
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(function(data){
console.log(data, value, value2);
let filters = {
"police station" : [value],
"crime number" : [parseInt(value2)]
};
let filtered = _this.multiFilter(data, filters);
console.log(filtered);
if(filtered.length <= 0){
_this.setState({resultFound : false})
}
else{
_this.setState({filteredData : filtered, resultFound : true})
}
});
}
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>
{!this.state.resultFound ? <div> No Data Found!!</div> :
JSON.stringify(this.state.filteredData)}
</div>
</form>
</div>
)
}
}
export default TestJS;
这篇关于如何基于REACT中的文本输入从API搜索的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
