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

9 浏览
0 Comments

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

我正在尝试使用Formik和Material UI创建表单。对于所有字段，一切都按预期工作，但问题在于Autocomplete。我找不到从localStorage中填充字段的方法。我尝试了所有的方法，包括设置value props、inputValue、defaultValue等，但似乎都不起作用。

谢谢@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 => (

)}

/>

并在Formik props中添加values prop：

{({setFieldValue, values}) => (

,...

0

1 答案

0 Comments

问题的出现的原因是代码中存储到localStorage的值无法正确显示在Autocomplete文本字段中。

解决方法如下：

1. 修改initial value为country: {code: "", label: "", phone: ""}，包含options的全部默认值。

2. 使用formik的props传递value={values.country}来正确加载值。

3. 在onChange事件中保存全部值：onChange={(e, value) => {setFieldValue("country", value); }}。

4. 修复错误的导入和使用：

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

，正确使用Field和TextField组件。

问题链接：working example。

问题进一步讨论中，提供了localStorage的数据。

问题链接：codesandbox.io/s/dank-https-tykxu。

问题的解决方法链接：codesandbox。

解决问题后，提醒对回答进行点赞和标记为已接受答案。

0