javascript - 按 Enter 按钮并过滤数据

Question

这个问题在这里已经有了答案:





How to handle the `onKeyPress` event in ReactJS?

(11 个回答)


去年关闭。




我正在实现过滤数据功能。以下代码是即时搜索功能。按回车键后有什么办法可以实现显示结果吗？表示只有按 Enter 键用户才能看到结果

import React, { Fragment } from "react";
import { TextField, makeStyles } from "@material-ui/core";

const useStyle = makeStyles((theme) => ({
  inputRoot: {
    backgroundColor: "white",
    borderRadius: 10,
  },
  inputInput: {
    padding: theme.spacing(1, 1, 1, 2),
    transition: theme.transitions.create("width"),
    width: "100%",

    [theme.breakpoints.up("md")]: {
      width: 80,
    },
  },
}));
const SearchBox = ({ onSubmit }) => {
  const classes = useStyle();
  const [formData, setFormData] = React.useState({
    keyword: "",
  });
  const { keyword } = formData;
  const handleChange = (keyword) => (e) => {
    setFormData({ ...formData, [keyword]: e.target.value });
  };

  onSubmit(keyword);
  return (
    <Fragment>
      <TextField
        value={keyword}
        placeholder="Search…"
        onChange={handleChange("keyword")}
        className={classes.inputRoot}
        margin="normal"
        size="small"
        autoFocus={true}
       variant="outlined"
      />
    </Fragment>
  );
};

export default SearchBox;

Answer 1

您可以使用 onKeyPress 和 event.key。它运作良好。

handleKeyPress = (event) => {
  if(event.key === 'Enter'){
    onSubmit(keyword)
  }
}

<TextField onKeyPress={handleKeyPress} />

这里有更多解决方案 https://stack-overflow.com/questions/27827234/how-to-handle-the-onkeypress-event-in-reactjs