Follow link when pressing enter

user_5398382 0
Viewed 189

I am using the react-router to pass input data from a search box when the user clicks the search button. However, when I press enter the input doesn't get passed over and the page just refreshes. Is there anyway I could set it so when the enter key is pressed the Nav routing happens?

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>
    )
}
react-router react-hooks reactjs
1 Answers

Might not be the best solution, but you may give it a try

Just add onKeyPress on FormControl to track "enter key" and add preventDefault on form tag to prevent your page from reloading.

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>
  );
};
user_62552650
Related