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

问题描述

目前正在尝试将 Material UI 的Autocomplete组件与 Formik 一起使用。到目前为止，诸如文本字段和 Material-UI 中的传统选择之类的东西在 Formik 中表现得非常好。实现自动完成并非如此。Formik 的 onChange 处理程序似乎没有更新 my 的值city_id。我知道 Autocomplete 仍然不是 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);

标签： reactjsmaterial-uiformik

你的问题是这handleChange不会像你正在做的那样工作。

如果您查看handleChange 文档：

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

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

还有另一个问题，您不能在中使用handleChange，Autocomplete因为它没有引用您想要的输入，并且它还具有与的正常参数不同的参数onChange，input正如您在docs中看到的那样。

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

所以你需要做的是使用setFieldValue并将它传递给Autocompletelike

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

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

这是一个工作示例

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

问题描述

解决方案

推荐阅读