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

Question

我一直在使用 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>
    );
  }```

Answer 1

问题不在于输入或 Material ui

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

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

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

这是一个codesandbox demo(输入一些内容并按 Enter 键)