Может ли компонент React Material-UI InputBase иметь действие onSubmit?

Question

Я работал с пользовательским интерфейсом для создания веб-приложения реагирования. Я хотел бы использовать InputBase для ввода текста и выполнить действие при нажатии клавиши «Ввод». У меня правильно работает событие onChange для обновления ввода, но я не могу понять, как выполнить действие onSubmit.

Я пытался вложить компонент в форму, но не заставил его работать. Он не только не выполняет действие, но и обновляет страницу. Единственное, что я обнаружил, немного помогло, это это , но я не мог сделать из этого ни головы, ни хвоста.

Кажется, что API-интерфейс inputBase не имеет функциональности для этого. Какие-либо предложения? Заранее спасибо!

Вот мой код как есть:

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

Проблема не в пользовательском интерфейсе ввода или материала

Если вы хотите повторить поведение при отправке формы, просто оберните ввод с form, и вы должны дать ему обработчик onSubmit

Чтобы избежать "обновления", вы должны предотвратить поведение по умолчанию

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

Вот демоверсия codesandbox (введите что-нибудь и нажмите ввод)