按下回车按钮并过滤数据

15 浏览
0 Comments

按下回车按钮并过滤数据

我正在实现筛选数据的功能。以下代码是即时搜索功能。是否有办法在按下回车键后显示结果？也就是说，只有按下回车键用户才能看到结果。\n

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 (
    
      
    
  );
};
export default SearchBox;

0

1 答案

0 Comments

问题的出现原因是在一个React应用中需要在按下Enter键后过滤数据。解决方法是使用onKeyPress事件和event.key属性来判断按下的键是否为Enter键，如果是，则执行相应的过滤数据操作。在给文本输入框TextField绑定onKeyPress事件时，调用handleKeyPress函数。handleKeyPress函数通过判断event.key是否为'Enter'来触发过滤数据的操作。另外，还可以在上述链接中找到更多关于在React中处理onKeyPress事件的解决方案。

0