React Formik Material UI Autocomplete:如何从localStorage填充autocomplete中的值？
React Formik Material UI Autocomplete:如何从localStorage填充autocomplete中的值？
提问于 2019-12-09 21:26:07
所以，我尝试用Formik和Material UI来创建表单。对于所有字段，一切都正常工作，但问题出在自动完成上。我找不到从localStorage填充字段的方法。我尝试了所有的方法，从赋值道具、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 props中，只需添加数值prop
{({setFieldValue, values}) => (
<Form>,...回答 1
Stack Overflow用户
回答已采纳
发布于 2019-12-09 21:38:27
编辑：
有几件事你需要改变。
首先，您不能只存储代码以便稍后加载它，您需要存储选项中的所有内容(孔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 material ui。
不知道你为什么那样使用它，但我已经改变了它。
这是一个working example
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59249886
复制相关文章
相似问题
腾讯云开发者
