在Formik中使用Material-UI的自动完成组件 [英] Using Material-UI's Autocomplete component with Formik

问题描述

当前正在尝试将Material UI的Autocomplete组件与Formik一起使用。到目前为止，像文本字段和从Material-UI中选择的传统内容在Formik上运行得很好。实现自动完成并非如此。Formik的onChange处理程序似乎没有更新Mycity_id的值。我知道自动完成功能仍然不是Material-UI核心库的一部分，但目前仍在观察是否有可能实现这样的功能。

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

import { cities } from '../data/cities';

import "./styles.css";

const initialValues = {
  city_id: '',
};

const submit = params => {
  alert(`Value for city_id is: ${params.city_id}`);
};

function App() {
  return (
     <Formik
      initialValues={ initialValues }
      onSubmit={ submit }
    >
      {({
        handleChange,
        values,
      }) => (
        <Form>
          <Autocomplete
            id="city_id"
            name="city_id"
            options={ cities }
            groupBy={ option => option.state }
            getOptionLabel={ option => option.name }
            style={{ width: 300 }}
            renderInput={params => (
              <TextField
                { ...params }
                onChange={ handleChange }
                margin="normal"
                label="Cities"
                fullWidth
                value={ values.city_id }
              />
            )}
          />

          <Button
            variant="contained"
            color="primary"
            type="submit"
          >
            Submit
          </Button>
        </Form>
      )}
    </Formik>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

推荐答案

您的问题是handleChange不会按照您的方式工作。

如果您查看handleChange docs：

常规输入更改事件处理程序。这将更新值[key]，其中key是发出事件的输入的名称属性。如果不存在name属性，handleChange将查找输入的id属性。注意：这里的"输入"是指所有HTML输入。

应该可以正常工作，但问题是TextField内部的TextField只会在您键入内容时触发handleChange，并且值将是文本，而不是您想要的id或其他属性，因此您需要将handleChange移到Autocomplete。

还有一个问题，您不能在Autocomplete中使用handleChange，因为它没有引用您想要的输入，而且它的参数也与input的正常onChange不同，您可以在docs中看到。

onChange
函数
值更改时激发的回调。
签名：
function(event: object, value: any) => void
event：回调的事件源
value：空

所以您需要做的就是使用setFieldValue并将其传递给AutocompleteLike

onChange={(e, value) => setFieldValue("city_id", value)}

您需要传递字段的名称和要获取的值。

这里是working example

这篇关于在Formik中使用Material-UI的自动完成组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！