Question

我正在尝试使用react.js创建一个简单的搜索栏，该搜索栏将连接到我的express.js后端，该后端将把正确的数据从数据库返回到前端。但是我还没有理解如何从搜索栏发送自定义研究结果以响应后端。

到目前为止，这是我的搜索组件，它只是创建了一个简单的搜索栏，应该将查询发送到后端：

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，这对我的情况不是很有帮助。

那么，如何在后端内部接收搜索查询？谢谢！

Answer 1

axios的第二个参数.get()是config，它可以容纳一个params对象，以便将任何查询参数添加到请求中。该对象的键是查询键，而键的值是查询?searchTerm=searchValue的值。所以可能看起来像

getData = () => {
        axios.get(
           "/get-data",
           {
               params: {searchTerm: this.state.query}
           }
       ).then(function(response){
            this.setState({
                result: response.data
            })
        });
    };

React.js：如何将搜索查询从react.js前端发送到express.js后端？

1 个答案: