React Formik Material UI Autocomplete：如何从 localStorage 填充自动完成内部的值？

Posted 2023-02-22

【中文标题】React Formik Material UI Autocomplete：如何从 localStorage 填充自动完成内部的值？

【英文标题】：React Formik Material UI Autocomplete: How can I populate value inside of autocomplete from localStorage?

【发布时间】：2020-04-02 14:47:06

【问题描述】：

所以，我正在尝试使用 Formik 和 Material UI 创建表单。对于所有字段，一切正常，但问题在于自动完成。我找不到从 localStorage 填充该字段的方法。我尝试了一切，从放置 value 道具、inputValue、defaultValue 等，但似乎没有任何效果。

import React from 'react'
import  Grid  from '@material-ui/core'
import  Autocomplete  from '@material-ui/lab'
import  Formik, Form, Field  from 'formik'
import  TextField  from 'formik-material-ui'
import * as yup from 'yup'
import  nationality  from '../../constants/nationality'
import Button from '../Button/Button'

export default function ForeignAddress () 

  let localStorageData = localStorage.getItem('foreignAddress'),
    retrivedData = JSON.parse(localStorageData)


  const handleNextClick = () => 
    console.log('clicked next')
  

  const handleBackClick = () => 
    console.log('clicked back')
  

  const validationSchema = yup.object(
    streetName: yup.string().required('Street name is required'),
    streetNumber: yup.string().required('Street number is required'),
    postalCode: yup.string().required('Postal code is required'),
    city: yup.string().required('City is required'),
    country: yup.string().required('Country is required'),
  )

  console.log(retrivedData)

  return (
    <React.Fragment>
      <div className="pages-wrapper address">
        <Formik
          initialValues=retrivedData ? retrivedData : streetName: '', streetNumber: '', postalCode: '', city: '', coAddress: '', country: ''
          onSubmit=(data) => 
            console.log(data)
            localStorage.setItem('foreignAddress', JSON.stringify(data))
            handleNextClick()
          
          validationSchema=validationSchema
        >
          (setFieldValue) => (
            <Form>
              <Grid container spacing=3>
                <Grid item xs=12 md=8>
                  <Field component=TextField name="streetName" label="Street Name" variant="outlined" fullWidth />
                </Grid>
                <Grid item xs=12 md=4>
                  <Field component=TextField name="streetNumber" label="Street Number" variant="outlined" fullWidth />
                </Grid>
                <Grid item xs=12 md=4>
                  <Field component=TextField name="postalCode" label="Postal Code" variant="outlined" fullWidth />
                </Grid>
                <Grid item xs=12 md=8>
                  <Field component=TextField name="city" label="City" variant="outlined" fullWidth />
                </Grid>
                <Grid item xs=12 md=6>
                  <Field component=TextField name="coAddress" label="C/O Address" variant="outlined" fullWidth />
                </Grid>
                <Grid item xs=12 md=6>
                  <Autocomplete
                    id="foreignCountry"
                    className="country-select"
                    name="country"
                    options=nationality
                    getOptionLabel=option => option.label
                    onChange=(e, value) => 
                      console.log(value)
                      setFieldValue("country", value.code)
                    
                    renderInput=params => (
                      <Field component=TextField ...params name="country" label="Country" variant="outlined" fullWidth/>
                    )
                  />
                </Grid>
              </Grid>
              <div className="button-wrapper">
                <Button label="Back" go="back" handleClick=handleBackClick/>
                <Button label="Next" go="next" type="submit" />
              </div>
            </Form>
          )
        </Formik>
      </div>
    </React.Fragment>
  )

编辑：

感谢@Vencovsky，我能够完成它

如果将来有人需要，这里是工作代码。 只需将自动完成组件更改为

<Autocomplete
  id="foreignCountry"
  className="country-select"
  name="country"
  options=nationality
  getOptionLabel=option => option.label
  defaultValue=values.country
  onChange=(e, value) => 
    console.log(value)
    setFieldValue("country", value)

  renderInput=params => (
    <Field component=TextField ...params name="country" label="Country" variant="outlined" fullWidth/>
)
/>

并在 Formik 道具中添加值道具

(setFieldValue, values) => (
   <Form>,...

【问题讨论】：

感谢分享，对我帮助很大：+1

感谢您为我指明正确的方向！

【参考方案1】：

编辑：

您需要更改一些内容。

首先，您不能只存储代码以供以后加载，您需要存储选项中的所有内容（孔value 对象）。

将country: ''的初始值更改为country: code: "", label: "", phone: ""，这是所有选项的默认值。

然后要正确加载值，您应该传递value=values.country，其中values 来自formik props。

在onChange 上，您应该保存孔值onChange=(e, value) => setFieldValue("country", value);

但是你也导入和使用了一些错误的东西，比如

  <Field
    component=TextField
    ...params
    name="country"
    label="Country"
    variant="outlined"
    fullWidth
  />

其中Field 是formik，TextField 来自formik 材质ui。

不知道你为什么这样使用它，但我已经改变了它。

这是working example

【讨论】：

感谢您的回复。但是价值观在变化，这不是问题。我想要得到的只是在自动完成文本字段中显示 localStorage 的值。所有其他字段都在填充。

什么不起作用？能否请您显示来自localStorage 的数据如何？

"streetName":"asd","streetNumber":"asd","postalCode":"sad","city":"asd","coAddress":"","country ":"RS"，就像我说的，当组件渲染时，除了自动完成字段之外的所有字段都被填充。

@utazabanje 检查我的编辑，你保存的数据有误

不，仍然没有。我已经制作了一个沙箱codesandbox.io/s/dank-https-tykxu，所以你可以看到有什么问题。尝试单击下一步，然后查看 localStorage。你会觉得这个国家有价值。之后尝试刷新页面，您将看到除 Country 字段之外的所有字段都已更新。再次感谢