Question

我正在实现过滤器数据功能。以下代码是即时搜索功能。按Enter键后有什么方法可以实现显示结果？意味着只有按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

还有更多解决方案

按Enter键并过滤数据

1 个答案: