使用 onChange 功能时自动完成被清除

Question

我正在使用 formik-material-ui 库中的 Autocomplete 组件，但很难让 onChange 函数正常工作。

配置 onChange 功能后，选择选项后 Autocomplete 被清除。

import * as React from 'react';
import {render} from 'react-dom';
import {Formik, Form, Field} from 'formik';
import {Button, LinearProgress} from '@material-ui/core';
import MuiTextField from '@material-ui/core/TextField';
import {
  Autocomplete,
  AutocompleteRenderInputParams,
} from 'formik-material-ui-lab';
import Box from '@material-ui/core/Box';

const teams = [
  {id: 1, name: 'Barcelona'},
  {id: 2, name: 'Real Madrid'},
];

const App = () => {
  const handleShowId = React.useCallback((event, value) => {
    alert(value.id);
  }, []);

  return (
    <Formik
      initialValues={{
        autocomplete: [],
      }}
      onSubmit={(values, {setSubmitting}) => {
        setTimeout(() => {
          setSubmitting(false);
          alert(JSON.stringify(values, null, 2));
        }, 500);
      }}
    >
      {({submitForm, isSubmitting, touched, errors}) => (
        <Form>
          {isSubmitting && <LinearProgress />}
          <Box margin={1}>
            <Field
              name="autocomplete"
              component={Autocomplete}
              options={teams}
              getOptionLabel={(option: any) => option.name}
              style={{width: 300}}
              onChange={handleShowId}
              renderInput={(params: AutocompleteRenderInputParams) => (
                <MuiTextField
                  {...params}
                  error={touched['autocomplete'] && !!errors['autocomplete']}
                  helperText={touched['autocomplete'] && errors['autocomplete']}
                  label="Autocomplete"
                  variant="outlined"
                />
              )}
            />
          </Box>
          <Box margin={1}>
            <Button
              variant="contained"
              color="primary"
              disabled={isSubmitting}
              onClick={submitForm}
            >
              Submit
            </Button>
          </Box>
        </Form>
      )}
    </Formik>
  );
};

render(<App />, document.getElementById('root'));