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

【问题标题】：How to save data from input fields in FormikFormik 中如何保存输入字段中的数据
【发布时间】：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>
    </>
  );
};

【问题讨论】：

标签： reactjs react-router material-ui formik

【解决方案1】：

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

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

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

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

【讨论】：