Question

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

如您在此沙盒中所见，我将Material AutoComplete用作带有免费选项的多个输入。该组件应返回到Formik [“ term1”，“ term2”，“ term3”]，并且用户可以在芯片中看到每个字符串作为标签。这将用作搜索中的过滤器。这一切都会发生，但前提是输入已经在InitialValues中。如果用户手动进行输入并按Enter或Tab键，则会引发错误“ value.map”不是功能。错误指向材料自动完成组件代码中的这一行

“ 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

1 个答案: