将Material-UI的Autocomplete组件与Formik一起使用

Question

[当前尝试在Formik中使用Material UI的Autocomplete组件。到目前为止，Formik可以很好地处理文本字段和Material-UI中的传统选择之类的事情。并非如此。 Formik的onChange处理函数似乎并未更新我的city_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);

Answer 1

您的问题是handleChange无法按照您的方式工作。

如果您查看handleChange docs：

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

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

还有另一个问题，您不能在handleChange中使用Autocomplete，因为它没有引用所需的输入，并且它的参数也与onChange的常规input不同，例如您可以在docs中看到。

onChange功能值更改时触发回调。签名：function(event: object, value: any) => voidevent：回调的事件源value：空

所以您需要做的是使用setFieldValue并将其传递给Autocomplete，如

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

您需要传递字段名称和想要获取的值（在这种情况下，该值为id）

这里是working example