如何将任何变量发送到react中的axios(获取请求)

Question

我有一个jsx文件，它有一个输入和一个按钮。在我的API服务中，有一个连接到axios的get请求。如何在axios中发出get请求，并打印输入中输入值的传入数据？

我的反应码

export default function HexFind() {
return (
<div>
<Container>
<br />
<br />
<form>
<div className="a">
<Image spaced="center" size="medium" src="" />
</div>
<div className="b">
<Input fluid placeholder='Hex ID giriniz' name="txtbox"></Input>
</div>
<div className="c">
<Button style={{ background: '#06AE57', color: 'white' }} >Hex Ara</Button>
</div>
</form>
<br />
<br />
<Grid celled>
<Grid.Row>
<Grid.Column width={4}>
Hex ID: 
</Grid.Column >
<Grid.Column width={4}>
Reason:
</Grid.Column>
<Grid.Column width={4}>
Date:
</Grid.Column>
<Grid.Column width={4}>
Server:
</Grid.Column>
</Grid.Row>
</Grid>
</Container>
</div>
)
}

我的axios连接服务

import axios from 'axios'
export default class SearchService{
searchHex(hexId) {
return axios.get("http://localhost:8080/api/datas/getByHexId?hexId="+hexId)
}

}

这是我的api招摇屏幕

点击查看图像

Answer 1

我不知道你从哪个库导入元素ButtonyInput，但你可以这样做：

import React, { useState } from 'react'
import axios from 'axios'
const [hexId, setHexId] = useState(null)
const handleButtonClick = () => {
axiosCall().then(resp =>{
console.log(resp)
})
}
const axiosCall = () => {
return axios.get('http://localhost:8080/api/datas/getByHexId?hexId=' + hexId)
}
const Form = () => {
return (
<React.Fragment>

<div className="b">
<Input fluid placeholder="Hex ID giriniz" name="txtbox" onChange={e =>setHexId(e.target.value)} ></Input>
</div>
<div className="c">
<Button style={{ background: '#06AE57', color: 'white' }} onClick={ e => handleButtonClick(e)} >Hex Ara</Button>
</div>
</React.Fragment>
)
}
export default Form