在反应的功能组件中实现 onKeyPress答案

【问题标题】：To implement onKeyPress in a functional component in react在反应的功能组件中实现 onKeyPress
【发布时间】：2019-03-10 09:37:30
【问题描述】：

我写了一个简单的函数组件反应这个

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 弹出。
任何帮助将不胜感激。

【问题讨论】：

你在传递什么作为道具？
只是当我们点击按钮时文本框中的文本
我可以使用 react hooks 或 class 来解决这个问题，但是使用一些简单的功能组件怎么样

标签： javascript reactjs

【解决方案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

【讨论】：

我必须点击搜索，当用户点击输入按钮时，我认为它不会起作用
您可以看到这个更新后的沙箱，其中包含功能实现。 codesandbox.io/s/vn0ozq98p7
看到我真的很感谢你的努力，你正在尝试的我已经做了，我需要功能之外不可用的道具。你现在明白我的问题了吗？
是的，我知道了。也有可能。让我更新沙盒并给你发消息。

【解决方案2】：

将事件传递给内部接收器，如果 keycode 等于 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

【讨论】：