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

在React的功能组件中实现onKeyPress

2 个答案: