Press Enter button and filter data

Question

I am implementing filter data feature. Following code is on-fly search feature. Is there any way to implement show result after pressing Enter key? Means only pressing Enter key user can see the result

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;

score 2 · Accepted Answer · answered Apr 17 '20 at 11:43

you can use onKeyPress and event.key. It works well.

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

<TextField onKeyPress={handleKeyPress} />

There are more solutions here https://stack-overflow.com/questions/27827234/how-to-handle-the-onkeypress-event-in-reactjs

Press Enter button and filter data

1 Answers1