Formik 中如何保存输入字段中的数据

Posted 2023-02-21

【中文标题】Formik 中如何保存输入字段中的数据

【英文标题】：How to save data from input fields in Formik

【发布时间】：2021-10-19 11:13:06

【问题描述】：

我在 formik 表单中有一堆输入字段，它们显示在抽屉中。当用户在字段中输入内容并汇总表单时，它会将查询和值添加到 url 并发送新请求以将正确的值加载到 datagrid 组件。 问题是，当用户在其中一个输入字段中输入内容，关闭抽屉并重新打开它时，数据会丢失，应用表单时也是如此 - 数据网格值是正确的，但是当用户想要修改时以前的过滤器，他需要重新输入所有内容，因为输入字段是空的。 数据保存到 url 字符串和请求中，但是如果我从那里获取并将其放入输入值中，我将无法再更改它，因为设置了 params.get() 值

组件看起来像this.setFilters 函数用history.push() 更改url

export const AccountFilters = ( setFilters ) => 
  const classes = useStyles();
  const  search  = useLocation();
  const params2 = new URLSearchParams(search);
  const name = params2.get("accountHolder");

  return (
    <>
      <div className=classes.drawerContent>
        <Typography variant="h5" gutterBottom>
          Filters
        </Typography>
      </div>
      <Formik initialValues=formikInitialValues onSubmit=setFilters>
        (
          values,
          handleChange,
          handleSubmit,
          handleReset,
          setFieldValue
        ) => (
          <form onSubmit=handleSubmit>
            <Box className=classes.fieldWrapper>
              <TextField
                name="accountHolder"
                id="accountHolder"
                label="Account Holder Name"
                value=values.accountHolder
                onChange=handleChange
              />
            </Box>
            <Box className=classes.selects>
              <Autocomplete
                renderInput=(params) => (
                  <TextField
                    ...params
                    label="Select Account status"
                    variant="outlined"
                  />
                )
                options=accountStatusMenu
                getOptionLabel=(option) => option.name
                name="status"
                id="status"
                multiple
                value=values.status
                onChange=(e, value) => setFieldValue("status", value)
              >
                ))
              </Autocomplete>

              <Box className="created">
                <MuiPickersUtilsProvider utils=DateFnsUtils>
                  <KeyboardDatePicker
                    name="timestampCreatedStart"
                    id="timestampCreatedStart"
                    margin="normal"
                    label="Select CREATED start date"
                    format="MM/dd/yyyy"
                    value=values.timestampCreatedStart
                    onChange=(value) =>
                      setFieldValue("timestampCreatedStart", value)
                    
                    KeyboardButtonProps=
                      "aria-label": "change date"
                    
                  />
                  <KeyboardDatePicker
                    name="timestampCreatedEnd"
                    id="timestampCreatedEnd"
                    margin="normal"
                    label="Select CREATED end date"
                    format="MM/dd/yyyy"
                    value=values.timestampCreatedEnd
                    onChange=(value) =>
                      setFieldValue("timestampCreatedEnd", value)
                    
                    KeyboardButtonProps=
                      "aria-label": "change date"
                    
                  />
                </MuiPickersUtilsProvider>
              </Box>
            </Box>
            <Box style= display: "flex", gap: "10px" >
              <Button type="submit" variant="contained" color="primary">
                Apply filters
              </Button>
              <Button
                onClick=handleReset
                variant="contained"
                color="secondary"
              >
                Reset filters
              </Button>
            </Box>
          </form>
        )
      </Formik>
    </>
  );
;

【参考方案1】：

发送完整代码 请在您的文本中添加换行符

我认为你不需要在这里使用 formik。我看到你使用 Material-UI，所以状态管理是可以的。

Formik 用于制作具有错误处理功能的表单，以便像新用户或其他复杂事物一样发布。

只需使用useState 或useRef 就可以了。