Reactjs 当我单击下拉菜单中的菜单时，如何传递值并点击第二个api？

如何将值传递给第二个api

import React，{useState}来自“React”；
从“axios”导入axios；
让应用程序=（）=>{
let[value，setValue]=useState（“”）；
let[locations，setLocations]=useState（[]）；
让handleSubmit=async（）=>{
如果（值==“”）返回；
let response=等待axios.get(`https://api2-4ofagodxfq-uc.a.run.app/locality?stateName=KARNATAKA&districtName=BANGALORE&pinCode=${value}`）；
if（response.status==200）设置位置（response.data）；
}
让handleChange=async（）=>{
如果（值==“”）返回；
让response1=等待axios.get(`https://api2-4ofagodxfq-uc.a.run.app/branch?stateName=KARNATAKA&districtName=BANGALORE&pinCode=560001&officeName=${value}`）；
如果（response1.status==200）设置位置（response1.data）；
}
返回
声明：
卡纳塔克邦


城市：
班加罗尔


PINCODE:setValue（e.target.value）}onKeyPress={（handleSubmit）}/>


setValue（e.target.value1）}>
{locations.map（（位置，索引）=>{
返回{location}
})}
{locations.map（（位置，索引）=>{
返回
{location}
})}
}
导出默认应用程序

您需要在提交时将所有表单字段包装在

调用

handleSubmit（）

中

像这样的

export default App;

handleSubmit（）}>
声明：
卡纳塔克邦


城市：
班加罗尔


PINCODE:setValue（e.target.value）}onKeyPress={（handleSubmit）}/>


setValue（e.target.value1）}>
{locations.map（（位置，索引）=>{
返回{location}
})}
{locations.map（（位置，索引）=>{
返回
{location}
})}

但它不会达到应有的速度，您试过了吗？你把它放在代码沙盒里了吗？是的，我试过了。它将命中第一个api并在

<form submit={() => handleSubmit()}>
STATE:<select value="KARNATAKA">
      <option value="KARNATAKA">KARNATAKA</option>
    </select>
    <br />
    CITY:<select value="BANGALORE">
      <option value="BANGALORE">BANGALORE</option>
    </select>
    <br />
    PINCODE:<input type="text" onChange={e => setValue(e.target.value)} onKeyPress={(handleSubmit)} />
    <br />
    <select onChange={e => setValue(e.target.value1)} >
      {locations.map((location, index) => {
        return <option key={index}>{location}</option>
      })}
    </select>
    <input type="submit" onClick={(handleChange)}></input>
    {locations.map((location, index) => {
      return <p key={index}>{location}</p>
    })}
</>