0

我有我的节点 js 服务器启动并运行，我处理这样的查询请求：

控制器.js

const getUsers = async (req, res, next) => {
    const age = req.query.age || 1;
    const lessage = req.query.minAge || 1000000000;
    const search = req.query.s || '';
    let users;
    try {
        users = await User.find({ age: { $gt: age, $lt: lessage }, name: { $regex: search } });
    } catch (e) {
        console.log('Could not find users : ' + e);
        next(e);
    }
    res.json(users);
};

我检查 url 中是否有查询值，如果不使用默认值，则在 mongoose find() 方法中使用它。

现在我的问题是如何处理或基本上发送这些查询以与单选按钮、输入和复选框做出反应？我试图在没有任何库的情况下处理它，并且每次我错过了一些东西或陷入了一个错误。

我试过这样：

    const what = loc.length < 1 ? '?' : '&';
    const [ name, setName ] = React.useState('');
    const [ searchName, setSearchName ] = React.useState('');
    const [ radio, setRadio ] = React.useState('');
    const [ place, setPlace ] = React.useState('');
<select
                onChange={(e) => {
                    setPlace(e.target.value);
                    setLoc((prev) => prev + place);
                }}
            >
                <option value="">Select place</option>
                <option value={`${what}place=us`}>US</option>
                <option value={`${what}place=uk`}>UK</option>
            </select>
            {place}
            <form
                onChange={(e) => {
                    setRadio(e.target.value);
                    setLoc((prev) => prev + radio);
                }}
            >
                <input type="radio" name="gender" value={`${what}age=22`} /> Age over 22 <br />
                <input type="radio" name="gender" value={`${what}ageMin=22`} /> Age lower than 22 <br />
            </form>
            {radio}
            <input
                type="text"
                value={name}
                onChange={(e) => {
                    setName(e.target.value);
                }}
            />

没有关于如何在 react 中使用不同选项发送多个查询请求的教程或文章。

那么如何使用 react js 处理向后端发送查询请求？

4

1 回答 1

0

我首先使用 react useState 钩子处理查询值设置值，如下所示：

    const [ name, setName ] = React.useState('');
    const [ age, setAge ] = React.useState('');
    const [ place, setPlace ] = React.useState('');

            <select
                onChange={(e) => {
                    setPlace(e.target.value);
                }}
            >
                <option value="">Select place</option>
                <option value="us">US</option>
                <option value="uk">UK</option>
            </select>
            {place}
            <br />
            <form
                onChange={(e) => {
                    setAge(e.target.value);
                }}
            >
                <input type="radio" name="gender" value="ageMax=22" /> Age over 22 <br />
                <input type="radio" name="gender" value="ageMin=22" /> Age lower than 22 <br />
            </form>
            {age}
            <br />
            <input
                type="text"
                value={name}
                onChange={(e) => {
                    setName(e.target.value);
                }}
            />
           {name}

然后我为 Link 设置了一个条件，如下所示：

<Link to={handleSearch}>Filter</Link>

    const handleSearch = () => {
        if (place.length === 0 && name.length === 0) {
            return `?${age}`;
        }

        if (age.length === 0 && name.length === 0) {
            return `?place=${place}`;
        }

        if (age.length === 0 && place.length === 0) {
            return `?s=${name}`;
        }

        if (age.length === 0) {
            return `?s=${name}&place=${place}`;
        }
        if (place.length === 0) {
            return `?s=${name}&${age}`;
        }
        if (name.length === 0) {
            return `?${age}&place=${place}`;
        }

        return `?s=${name}&${age}&place=${place}`;
    };
于 2020-08-20T06:37:56.623 回答