我如何在反应中将任何变量发送到 axios（获取请求）答案

【问题标题】：How do i send any variable to axios in react (get request)我如何在反应中将任何变量发送到 axios（获取请求）
【发布时间】：2021-09-24 09:35:13
【问题描述】：

我有一个 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 招摇屏幕

click for image

【问题讨论】：

标签： reactjs api axios get get-request

【解决方案1】：

我不知道您从哪个库中导入元素 Button y Input，但您可以执行以下操作：

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

【讨论】：