如果事件是 Enter Button 或鼠标点击，做一些事情

Question

我有一个搜索栏，我希望用户能够在单击搜索按钮或按下回车键时调用 handleSearch 函数。搜索按钮工作正常，但我无法在按下回车键时让它工作。请帮忙:)

import React, { useState } from 'react';
import { Form, FormControl, Button } from 'react-bootstrap';
import { useHistory } from 'react-router-dom';
import { useDispatch } from 'react-redux';
import { searchBlogs, setSearchQuery } from '../../actions/searchBlogsAction';

function SearchComponent() {
  const history = useHistory();
  const dispatch = useDispatch();
  const [searchInput, setSearchInput] = useState('');

  const inputHandler = (e) => {
    setSearchInput(e.target.value);
  };

  // Search blogs and redirect to the search results page
  const handleSearch = (e) => {
    if (e.keyCode === 13 || e == ??) {
      e.preventDefault();
      history.push('/search-results');
      dispatch(setSearchQuery(searchInput));
      dispatch(searchBlogs(searchInput));
      setSearchInput('');
    }
  };

  return (
    <Form inline>
      <FormControl
        type="text"
        size="sm"
        placeholder="Search"
        className="mr-sm-2"
        onChange={inputHandler}
        value={searchInput}
        onKeyPress={handleSearch}
      />
      <Button size="sm" variant="outline-secondary" onClick={handleSearch}>
        Search
      </Button>
    </Form>
  );
}

export default SearchComponent;

Answer 1

试试这个：

      <FormControl
        type="text"
        size="sm"
        placeholder="Search"
        className="mr-sm-2"
        onChange={inputHandler}
        value={searchInput}
        onKeyPress={event => event.key === "Enter" && handleSearch()}
      />

handleSearch 函数应该是：

  const handleSearch = (e) => {
      e.preventDefault();
      history.push('/search-results');
      dispatch(setSearchQuery(searchInput));
      dispatch(searchBlogs(searchInput));
      setSearchInput('');
  }

Answer 2

根据react-bootstrap docs regarding Form，您可以将onSubmit 回调传递给Form 组件，如下所示：

- <Form inline>
+ <Form inline onSubmit={handleSearch}>

Answer 3

您想将onSubmit 事件处理程序添加到表单中。

import React, { useState } from 'react';
import { Form, FormControl, Button } from 'react-bootstrap';
import { useHistory } from 'react-router-dom';
import { useDispatch } from 'react-redux';
import { searchBlogs, setSearchQuery } from '../../actions/searchBlogsAction';

function SearchComponent() {
  const history = useHistory();
  const dispatch = useDispatch();
  const [searchInput, setSearchInput] = useState('');

  const inputHandler = (e) => {
    setSearchInput(e.target.value);
  };

  // Search blogs and redirect to the search results page
  const handleSearch = (e) => {
    e.preventDefault();
    history.push('/search-results');
    dispatch(setSearchQuery(searchInput));
    dispatch(searchBlogs(searchInput));
    setSearchInput('');
  };

  return (
    <Form inline onSubmit={handleSearch}>
      <FormControl
        type="text"
        size="sm"
        placeholder="Search"
        className="mr-sm-2"
        onChange={inputHandler}
        value={searchInput}
      />
      <Button type="submit" size="sm" variant="outline-secondary">
        Search
      </Button>
    </Form>
  );
}

export default SearchComponent;

点击表单中的提交按钮会触发提交事件，就像点击回车键一样。