在input onChange中响应发送AJAX请求

这是我的SearchForm.js，关于更改输入

关键字

，我需要在其他服务器上发送带有此输入值的AJAX请求，获取一些值并使用它们自动完成此输入。有可能吗？怎么做

import React from 'react';
import ReactDOM from 'react-dom';

class SearchForm extends React.Component {
    constructor(props) {
      super(props)

      this.state = {
       keywords: '',
       city: '',
       date: ''     
      }

      //this.handleChange = this.handleChange.bind(this)
      //this.handleSubmit = this.handleSubmit.bind(this)

      this.handleKeywordsChange = this.handleKeywordsChange.bind(this);
      this.handleCityChange = this.handleCityChange.bind(this);  
     }

    handleKeywordsChange(e) {      
        this.setState({
          keywords: e.target.value
        });
    }

    handleCityChange(e) {      
        this.setState({
          city: e.target.value
        });
    }

    render() {
        return ( 
            <form className='form search-form' onSubmit={this.handleSubmit}>
                <div className="form-row">
                  <div className="form-group col-md-5">
                    <label htmlFor="keywords">Keywords</label>
                    <input type="text" className="form-control" name="keywords" id="keywords" placeholder="Keywords" onChange={this.handleKeywordsChange} value={this.state.keywords} />

                  </div>

                  <div className="form-group col-md-5">
                    <label htmlFor="city">City</label>
                    <input type="text" className="form-control" name="city" id="city" placeholder="City" onChange={this.handleCityChange} value={this.state.city} />
                  </div>

                  <div className="form-group col-md-2">
                    <label htmlFor="date">Date</label>
                    <select className="form-control" name="date" id="date" onChange={this.handleChange} value={this.state.date}>
                      <option>1</option>
                      <option>2</option>
                      <option>3</option>
                      <option>4</option>
                      <option>5</option>
                    </select>
                  </div>
                 </div>

                 <div className="form-row">
                     <div className="form-group col-md-12">
                        <input id='formButton' className='btn btn-primary' type='submit' placeholder='Send' />
                    </div>
                 </div>
            </form>
        )
    }
}

export { SearchForm }

从“React”导入React；
从“react dom”导入react dom；
类SearchForm扩展了React.Component{
建造师（道具）{
超级（道具）
此.state={
关键词：''，
城市：''，
日期：''
}
//this.handleChange=this.handleChange.bind（this）
//this.handleSubmit=this.handleSubmit.bind（this）
this.handleKeywordsChange=this.handleKeywordsChange.bind（this）；
this.handleCityChange=this.handleCityChange.bind（this）；
}
handleKeywordsChange（e）{
这是我的国家({
关键词：目标价值
});
}
handleCityChange（e）{
这是我的国家({
城市：e.target.value
});
}
render（）{
报税表（
关键词
城市
日期
1.
2.
3.
4.
5.
)
}
}
导出{SearchForm}

使用axios api调用api并获取数据

onKeyUp(e) {
  axios.get('/seachdata?keywords='+e.target.value)
  .then(function (response) {
     this.setState({autosearchresponse: response.data})
  })
  .catch(function (error) {
    console.log(error);
  });
}

在此.state.autosearchresponse中搜索数据集 您可以将自动搜索响应用作html

 {this.state.autosearchresponse.map((value, i)=>
  <div key={i}>{value}</div>    
)}

{this.state.autosearchresponse.map（（值，i）=>
{value}
)}

将onKeyUp函数绑定到输入

---

使用axios api调用api并获取数据

onKeyUp(e) {
  axios.get('/seachdata?keywords='+e.target.value)
  .then(function (response) {
     this.setState({autosearchresponse: response.data})
  })
  .catch(function (error) {
    console.log(error);
  });
}

在此.state.autosearchresponse中搜索数据集 您可以将自动搜索响应用作html

 {this.state.autosearchresponse.map((value, i)=>
  <div key={i}>{value}</div>    
)}

{this.state.autosearchresponse.map（（值，i）=>
{value}
)}

将onKeyUp函数绑定到输入

---

我需要在SearchForm.js中包含axios吗？首先安装“npm install axios”并包含“从'axios'导入axios”；如何在ajax请求中添加

User Agent

header？axios.get（URL，{headers:{'User Agent'：'Chrome'}）我需要在SearchForm.js中包含axios吗？首先安装“npm install axios”并包括类似“从“axios”导入axios；如何在ajax请求中添加

User-Agent

header？axios.get（URL，{headers:{'User-Agent'：'Chrome'}）如果您试图将代码最小化为演示您的情况的最小代码集，那么查看和回答问题会更好，这会有很多缺点。此外，混合使用4和2空格缩进阅读起来很烦人。如果您试图将代码最小化为演示您的情况的最小代码集，那么查看和回答问题会更好在这种情况下，这有很多绒毛。而且混合4和2空格缩进阅读起来很烦人。