Material-UI 表单中的自动完成 freeSolo

Question

https://codesandbox.io/s/naughty-bogdan-hvhsd?file=/src/searchfield.tsx

如您在此沙盒中所见，我使用 Material 自动完成作为具有免费选项的多重输入。该组件应该 return 到 Formik ["term1","term2","term3"] 并且用户可以将每个字符串视为 Chip 中的标签。这将用作搜索中的过滤器。这一切都会发生，但前提是输入已经在 InitialValues 中。如果用户手动输入并按 enter 或 tab 键，它会出现错误“value.map”不是函数。错误指向 material 自动完成组件代码中的这一行

"getInputProps = _useAutocomplete.getInputProps,"

有没有人知道如何让自动完成和表单协同工作？

Answer 1

像这样 (searchfield.tsx):

import React, { useState } from "react";
import { TextField } from "@material-ui/core";
import { Formik, Form } from "formik";
import Autocomplete from "@material-ui/lab/Autocomplete";

export default function SearchBar() {
  const [searchValues] = useState(["ola", "como"]);

  return (
    <Formik
      initialValues={{
        search: []
      }}
      onSubmit={(values, { setSubmitting }) => {
        setTimeout(() => {
          JSON.stringify(values, null, 2);
          console.log(values);
          setSubmitting(false);
        }, 400);
      }}
    >
      {({ values, handleChange, handleBlur, handleSubmit }) => (
        <Form onSubmit={handleSubmit}>
          <Autocomplete
            autoSelect
            freeSolo
            id="search"
            limitTags={4}
            multiple
            onBlur={handleBlur}
            onChange={handleChange}
            options={searchValues}
            getOptionLabel={option => option}
            filterSelectedOptions
            renderInput={params => (
              <TextField
                {...params}
                id="search"
                name="search"
                variant="outlined"
                label="Busca"
                placeholder="Termos de Busca"
              />
            )}
          />
          <h6>{searchValues}</h6>
        </Form>
      )}
    </Formik>
  );
}

Material-UI 表单中的自动完成 freeSolo

Material-UI AutoComplete freeSolo in Form

forms

typescript

reactjs

material-ui

formik