React Material-UI InputBase 组件可以有 onSubmit 动作吗？答案

【问题标题】：Can React Material-UI InputBase component have an onSubmit action?React Material-UI InputBase 组件可以有 onSubmit 动作吗？
【发布时间】：2020-04-30 16:51:26
【问题描述】：

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

我已尝试将组件嵌套在表单中，但尚未使其正常工作。它不仅不执行操作，而且还会刷新页面。我发现的唯一有一点帮助的东西是this，但我无法确定它的正面或反面。

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

这是我的代码：

import { fade, makeStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import InputBase from '@material-ui/core/InputBase';
import SearchIcon from '@material-ui/icons/Search';

const useStyles = makeStyles((theme) => ({
    grow: {
      flexGrow: 1,
    },
    title: {
      display: 'none',
      [theme.breakpoints.up('sm')]: {
        display: 'block',
      },
    },
    search: {
      position: 'relative',
      borderRadius: theme.shape.borderRadius,
      backgroundColor: fade(theme.palette.common.white, 0.15),
      '&:hover': {
        backgroundColor: fade(theme.palette.common.white, 0.25),
      },
      marginRight: theme.spacing(2),
      marginLeft: 0,
      width: '100%',
      [theme.breakpoints.up('sm')]: {
        marginLeft: theme.spacing(3),
        width: 'auto',
      },
    },
    searchIcon: {
      padding: theme.spacing(0, 2),
      height: '100%',
      position: 'absolute',
      pointerEvents: 'none',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
    },
    inputRoot: {
      color: 'inherit',
    },
    inputInput: {
      padding: theme.spacing(1, 1, 1, 0),
      // vertical padding + font size from searchIcon
      paddingLeft: `calc(1em + ${theme.spacing(4)}px)`,
      transition: theme.transitions.create('width'),
      width: '100%',
      [theme.breakpoints.up('md')]: {
        width: '20ch',
      },
    },
  }));

  export default function PrimarySearchAppBar(props) {
    const classes = useStyles();

    return (
      <div className={classes.grow}>
        <AppBar position="static">
          <Toolbar>
            <Typography className={classes.title} variant="h6" noWrap>
              Vision - Github Activity Analyzer
            </Typography>
            <div className={classes.search}>
            <form onSubmit={props.submit}>
              <div className={classes.searchIcon}>
                <SearchIcon />
              </div>
                <InputBase
                    placeholder="Search…"
                    classes={{
                    root: classes.inputRoot,
                    input: classes.inputInput,
                    }}
                    inputProps={{ 'aria-label': 'search' }}
                    onChange={props.input}
                />
              </form>
            </div>
          </Toolbar>
        </AppBar>
      </div>
    );
  }```

【问题讨论】：

标签： javascript reactjs material-ui

【解决方案1】：

问题不在于输入或材料 ui

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

为避免“刷新”，您应该防止默认行为

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

这是codesandbox demo （输入一些内容并回车）

【讨论】：