React Material-UI InputBase 组件可以有 onSubmit 操作吗？

Question

我一直在使用 Material UI 来构建 React Web 应用程序。我想使用 InputBase 接收文本并在按“Enter”键时执行操作。我有 onChange 事件正常工作来更新输入，但我似乎无法弄清楚如何进行 onSubmit 操作。

\n\n

我尝试过将组件嵌套在表单中，但尚未使其工作。它不仅不执行操作，而且还刷新页面。我发现的唯一有一点帮助的就是这个，但我无法理解它。

\n\n

inputBase API 似乎没有相应的功能。有什么建议么？提前致谢！

\n\n

这是我的代码：

\n\n

import { fade, makeStyles } from \'@material-ui/core/styles\';\nimport AppBar from \'@material-ui/core/AppBar\';\nimport Toolbar from \'@material-ui/core/Toolbar\';\nimport Typography from \'@material-ui/core/Typography\';\nimport InputBase from \'@material-ui/core/InputBase\';\nimport SearchIcon from \'@material-ui/icons/Search\';\n\nconst useStyles = makeStyles((theme) => ({\n    grow: {\n      flexGrow: 1,\n    },\n    title: {\n      display: \'none\',\n      [theme.breakpoints.up(\'sm\')]: {\n        display: \'block\',\n      },\n    },\n    search: {\n      position: \'relative\',\n      borderRadius: theme.shape.borderRadius,\n      backgroundColor: fade(theme.palette.common.white, 0.15),\n      \'&:hover\': {\n        backgroundColor: fade(theme.palette.common.white, 0.25),\n      },\n      marginRight: theme.spacing(2),\n      marginLeft: 0,\n      width: \'100%\',\n      [theme.breakpoints.up(\'sm\')]: {\n        marginLeft: theme.spacing(3),\n        width: \'auto\',\n      },\n    },\n    searchIcon: {\n      padding: theme.spacing(0, 2),\n      height: \'100%\',\n      position: \'absolute\',\n      pointerEvents: \'none\',\n      display: \'flex\',\n      alignItems: \'center\',\n      justifyContent: \'center\',\n    },\n    inputRoot: {\n      color: \'inherit\',\n    },\n    inputInput: {\n      padding: theme.spacing(1, 1, 1, 0),\n      // vertical padding + font size from searchIcon\n      paddingLeft: `calc(1em + ${theme.spacing(4)}px)`,\n      transition: theme.transitions.create(\'width\'),\n      width: \'100%\',\n      [theme.breakpoints.up(\'md\')]: {\n        width: \'20ch\',\n      },\n    },\n  }));\n\n  export default function PrimarySearchAppBar(props) {\n    const classes = useStyles();\n\n    return (\n      <div className={classes.grow}>\n        <AppBar position="static">\n          <Toolbar>\n            <Typography className={classes.title} variant="h6" noWrap>\n              Vision - Github Activity Analyzer\n            </Typography>\n            <div className={classes.search}>\n            <form onSubmit={props.submit}>\n              <div className={classes.searchIcon}>\n                <SearchIcon />\n              </div>\n                <InputBase\n                    placeholder="Search\xe2\x80\xa6"\n                    classes={{\n                    root: classes.inputRoot,\n                    input: classes.inputInput,\n                    }}\n                    inputProps={{ \'aria-label\': \'search\' }}\n                    onChange={props.input}\n                />\n              </form>\n            </div>\n          </Toolbar>\n        </AppBar>\n      </div>\n    );\n  }```\n

\n

Answer 1

问题不在于输入或材质用户界面

如果你想复制表单提交行为只需用 a 包装你的输入form，你应该给它一个onSubmit处理程序

为了避免“刷新”，你应该阻止默认行为

const onSubmit = e => {
    e.preventDefault();
    alert("gotta submit");
  };

这是一个codesandbox演示 （输入一些内容并按回车键）