如何解决React从api获取更多输入字段
我是新来的人。我有一个输入字段,用户可以在其中搜索位置,哪些API可以帮助获得有效的结果。
用户可以添加多个位置
我可以添加多个输入字段并从API获取信息,但问题是无法在下拉列表或其他提示中将其显示为建议。如何在该输入字段的确切索引中设置结果?每当输入字段被单击时,display
状态集ture
。仅在单击输入字段时才需要使其true
这是我到目前为止所做的
function MultiWay2(props) {
const [inputLimit,setinputLimit] = useState(0);
const [display,setDisplay] = useState(false)
const [location,setlocation] = useState([])
const [locationCode,setlocationCode] = useState('')
const onSubmit = () => {
console.log(locationCode)
//some action
}
const SearchLocation = (location,index) => {
Axios.get('https://api.com/location/search',{
headers: {
"api-key": 12345,},params: {
"query": location
}
})
.then(response => {
// console.log(response.data)
setlocation(response.data)
setDisplay(true)
})
.catch((error) => {
console.log(error)
})
}
const [inputList,setinputList] = useState([
{ location: '',])
const addanother = (e,index) => {
const list = [...inputList];
setinputLimit(inputLimit + 1)
setinputList([...inputList,{ location: "" }])
}
const handleChange = (e,index) => {
const { name,value } = e.target;
const list = [...inputList];
list[index][name] = value
setinputList(list)
}
const removeanother = index => {
const list = [...inputList];
list.splice(index,1)
setinputLimit(inputLimit - 1)
setinputList(list)
}
return (
<div className="location-search">
<h1>Multi-city</h1>
{/* <Form onSubmit={(e) => {
onSubmit(e)
}}> */}
<Form>
{
inputList.map((inputLists,index) => {
return (
<FormGroup row key={index}>
<Col md={4}>
<Label for="form">Find Location</Label>
<Input type="text" name="location" placeholder="Search by Country,City..." onClick={(e) => setDisplay(!display)} value={inputLists.location} onChange={(e) => {
handleChange(e,index)
SearchLocation(e.currentTarget.value,index)
}} autoComplete="off" required />
{
display && (
Object.keys(location).length ?
<div className="autoComplete">
{
Object.entries(location).map(([port,i]) => {
return (
<div onClick={() => {
locationCode.length == 0 ? setlocationCode(i.code) : setlocationCode(locationCode+","+i.code)
inputLists.location = i.display_name
setDisplay(!display)
}} className="option" key={port}>
<span>{i.display_name}</span>
</div>
)
})
}
</div> :
<EitropLoaderTwoBar />
)
}
</Col>
{
inputList.length - 1 == index &&
inputLimit < 3 ?
< Col md={2} className="mt-2">
<Button type="button" className="btn-warning w-100 mt-4" onClick={(e) => addanother(e,index)}>Add Another</Button>
</Col> :
<Col md={2} className="mt-2">
<Button type="button" className="btn-danger w-100 mt-4" onClick={() => removeanother(index)}>Remove</Button>
</Col>
}
</FormGroup>
)
})
}
<FormGroup>
<Col md={2} className="mt-4">
<Button type="button" className="btn-warning w-100 mt-4" onClick={() => onSubmit()}>Submit</Button>
</Col>
</FormGroup>
</Form>
<pre>
{
// JSON.stringify(inputList,null,2)
}
</pre>
</div >
);
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。