按下回车时跟随链接

Question

当用户单击搜索按钮时，我正在使用 react-router 从搜索框中传递输入数据。但是，当我按 Enter 时，输入不会被传递，页面只会刷新。无论如何我可以设置它，以便在按下回车键时发生导航路由？

import React, {useState} from 'react'
import '../sass/custom.scss';
import {Nav, Form, FormControl} from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
import {NavLink} from 'react-router-dom';

export const SearchBar = () => {
    let [query, setQuery] = useState("")

    return (
        <div className="search-container">
            <div className="row height d-flex justify-content-center align-items-center">
                <div className="col-xs-12 col-sm-12 col-md-8 col-lg-8 my-5">
                    <div className="search"> <i className="fa fa-search"></i> 
                        <Form className='d-flex mx-auto'>
                            <FormControl
                                type='search'
                                placeholder='Search'
                                className='form-control'
                                aria-label='Search'
                                onChange={e => setQuery(e.target.value) }
                            />
                            <Nav.Link 
                                as={NavLink} 
                                exact={true} 
                                to={{pathname:`/search`, state: `${query}` }} 
                                className="search-button center btn btn-primary"
                                >
                                Search
                            </Nav.Link>                
                        </Form>
                    </div>
                </div>
            </div>
        </div>
    )
}

Answer 1

可能不是最好的解决方案，但您可以尝试一下

只需在 FormControl 上添加 onKeyPress 以跟踪“输入键”并在表单标签上添加 preventDefault 以防止您的页面重新加载。

import React, { useState } from "react";
import '../sass/custom.scss';
import { Nav, Form, FormControl } from "react-bootstrap";
import 'bootstrap/dist/css/bootstrap.min.css';
import { NavLink, useHistory } from "react-router-dom";

export const SearchBar = () => {
  let [query, setQuery] = useState("");
  const history = useHistory();

  return (
    <div className="search-container">
      <div className="row height d-flex justify-content-center align-items-center">
        <div className="col-xs-12 col-sm-12 col-md-8 col-lg-8 my-5">
          <div className="search">
            <i className="fa fa-search"></i>
            <Form
              className="d-flex mx-auto"
              onSubmit={(e) => e.preventDefault()}
            >
              <FormControl
                type="search"
                placeholder="Search"
                className="form-control"
                aria-label="Search"
                onChange={(e) => setQuery(e.target.value)}
                onKeyPress={(e: any) => {
                  if (e.nativeEvent.charCode === 13) {
                    history.push({ pathname: `/search`, state: `${query}` });
                  }
                }}
              />
              <Nav.Link
                as={NavLink}
                exact={true}
                to={{ pathname: `/search`, state: `${query}` }}
                className="search-button center btn btn-primary"
              >
                Search
              </Nav.Link>
            </Form>
          </div>
        </div>
      </div>
    </div>
  );
};