Я пытаюсь создать простую панель поиска с помощью react. js, которая будет подключаться к моему express. js back-end, который вернет правильные данные из базы данных обратно в front-end. Но мне так и не удалось понять, как отправить свое собственное исследование из панели поиска в ответ на мой бэкэнд.
Пока это мой компонент поиска, он просто создает простую панель поиска, которая предполагается для отправки запроса в серверную часть:
mport React, { Component } from 'react';
import axios from 'axios';
export default class Search extends Component
{
constructor(){
super()
this.state = {
query: '',
result: [],
filteredResult: []
};
}
getData = () => {
axios.get("/get-data").then(function(response){
this.setState({
result: response.data
})
});
};
handleInputChange = () => (
this.setState({
query: this.search.value
}), () => {
if (this.state.query) {
this.getData()
}
}
);
componentDidMount(){
this.getData();
};
render() {
return (
<form>
<input placeholder="Search for..." ref={input => this.search = input} onChange={this.handleInputChange}/>
<p>{this.state.query}</p>
</form>
);
}
}
Я могу подключиться к get-data
роуту, но мне не удалось выяснить, как отправить на него свой поисковый запрос. Я искал довольно долго, и каждый пример, который я видел, использовал кучу разных API из Интернета, что не очень полезно для моего случая.
Итак, как мне получить свой поисковый запрос внутри моей серверной части? Спасибо!