在React的功能組件中實現onKeyPress

Question

我寫了一個簡單的功能組件對此做出反應

import React from "react";
import Navbar from "react-bootstrap/Navbar";
import Classes from "./Navbar.module.css";
import SpotifyImage from "../SpotifyImage/BrandImage";
// import Navlink from '../Navlink/Navlink'
import Nav from "react-bootstrap/Nav";
import FormControl from "react-bootstrap/FormControl";
import Button from "react-bootstrap/Button";
import Form from "react-bootstrap/Form";

const Navigation = props => {
  return (
    <Navbar collapseOnSelect expand="lg" className={Classes.nav}>
      <Navbar.Brand href="/">
        <SpotifyImage />
      </Navbar.Brand>
      <Navbar.Toggle aria-controls="responsive-navbar-nav" />
      <Navbar.Collapse id="responsive-navbar-nav">
        <Nav className={"ml-auto"}>
          <Form inline>
            <FormControl
              onChange={props.Changed}
              type="text"
              placeholder="Name..."
              className={["mr-lg-2", Classes.searchIt].join(" ")}
            />
            <Button
              onClick={props.setSearch}
              className={Classes.buttonWidth}
              variant="dark"
            >
              Search
            </Button>
          </Form>
        </Nav>
      </Navbar.Collapse>
    </Navbar>
  );
};

export default Navigation;

現在，我想實現的是，只要在文本字段內按下“ Enter鍵”，它就應該擊中/或運行setSearch onClick = {props.setSearch} 。 我知道在課堂上該怎么做。
但是我無法始終在功能組件中執行此操作，錯誤總是出現預期的賦值或函數調用，而是彈出了一個表達式no-unused-expressions 。
任何幫助，將不勝感激。

Answer 1

您可以在表單上添加onSubmit操作，以使代碼看起來像這樣。

import React from 'react'
import Navbar from 'react-bootstrap/Navbar'
import Classes from './Navbar.module.css'
import SpotifyImage from '../SpotifyImage/BrandImage'
// import Navlink from '../Navlink/Navlink'
import Nav from 'react-bootstrap/Nav'
import FormControl from 'react-bootstrap/FormControl'
import Button from 'react-bootstrap/Button'
import Form from 'react-bootstrap/Form'
const Navigation = (props)=>{
    return(
      <Navbar collapseOnSelect expand="lg" className={Classes.nav}>
      <Navbar.Brand href="/"><SpotifyImage/></Navbar.Brand>
      <Navbar.Toggle aria-controls="responsive-navbar-nav" />
      <Navbar.Collapse id="responsive-navbar-nav">
            <Nav className={"ml-auto"}>
            <Form inline onSubmit={this.handleSubmit}>
              <FormControl onChange={props.Changed}  type="text" placeholder="Name..." className={["mr-lg-2",Classes.searchIt].join(" ")} />
              <Button onClick={props.setSearch} className={Classes.buttonWidth} variant="dark">Search</Button>    
           </Form>
                </Nav>
          </Navbar.Collapse>
        </Navbar>
        )
    }

export default Navigation  

Answer 2

將事件傳遞給內部接收者，以及如果鍵碼等於13-運行setSearch：

import React from 'react'
import Navbar from 'react-bootstrap/Navbar'
import Nav from 'react-bootstrap/Nav'
import FormControl from 'react-bootstrap/FormControl'
import Button from 'react-bootstrap/Button'
import Form from 'react-bootstrap/Form'
import SpotifyImage from '../SpotifyImage/BrandImage'
import Classes from './Navbar.module.css'

const Navigation = ({ changed, setSearch }) => {
  const ifEnterPressed = ({ callback, event }) => {
    if (event.keycode === 13) {
      callback(event)
    }
  }
  return(
    <Navbar className={Classes.nav} collapseOnSelect expand="lg">
      <Navbar.Brand href="/">
        <SpotifyImage/>
      </Navbar.Brand>
      <Navbar.Toggle aria-controls="responsive-navbar-nav" />
      <Navbar.Collapse id="responsive-navbar-nav">
        <Nav className={"ml-auto"}>
        <Form inline>
          <FormControl
            className={["mr-lg-2",Classes.searchIt].join(" ")}
            onChange={changed}
            onKeyUp={(event) => ifEnterPressed({ callback: setSearch, event })}
            placeholder="Name..."
            type="text"
          />
          <Button
            className={Classes.buttonWidth}
            onClick={setSearch}
            variant="dark"
          >
            Search
          </Button>
        </Form>
        </Nav>
      </Navbar.Collapse>
    </Navbar>
  )
}

export default Navigation