在 table 字段 onClick 中添加数据后,我需要将字段设置为初始状态

I need to set Fields to initial state after data added in table field onClick

我想在点击 ADD 按钮向 table 添加数据后将所有 TextField 设置为初始状态

我可以使用 AssignSearchesForm.resetForm(); 将其设置为初始状态,但是如果我在添加按钮中设置它会发生什么点击它会重置数据但我的 table 数据也会被删除,因为它更新了 Formik 值 setTeamData([values, ...teamdata]);

我在 onClick 之后在此状态下添加 Formik 值,它会被添加,但如果我重置表单并设置初始值,此状态值也会设置为空,所以在将数据添加到 table [=24 后我想要什么=]TextField 重置或初始化,但 table 如果我们不更新

,数据将保持不变

我正在尝试这种方式

          <Button
            onClick={() => {
              AssignSearchesForm.handleSubmit();
              // I tried this two way
              //first way
              // AssignSearchesForm.resetForm();

              //second way
              // AssignSearchesForm.setFieldValue("selectName","")
              // AssignSearchesForm.setFieldValue("selectAge","")
              // AssignSearchesForm.setFieldValue("location","")
            }}
            variant="contained"
          >
            Add
          </Button>
export default function App() {
  const [teamdata, setTeamData] = React.useState([]);

  const AssignSearchesForm = useFormik({
    initialValues: {
      selectName: "",
      selectAge: "",
      location: ""
    },
    validationSchema,
    onSubmit: (values) => {
      setTeamData([values, ...teamdata]);
    }
  });

  let filteredArray = nameList.filter(
    (e) => !teamdata.some((data) => data.selectName === e.selectName)
  );

  const handleChange = (e) => {
    const selectedName = e.target.value;
    const name = nameList.find((data) => data.selectName === selectedName);
    const newOptions = Object.values(name).reduce((optionList, key) => {
      optionList.push({ value: key, label: key });
      return optionList;
    }, []);
    AssignSearchesForm.setFieldValue("selectName", selectedName);
    AssignSearchesForm.setFieldValue("selectAge", newOptions[1]?.value || "");
    AssignSearchesForm.setFieldValue("location", newOptions[2]?.value || "");
  };

  return (
    <div className="App">
      <Grid container direction="row" spacing={1}>
        <Grid item xs={4}>
          <TextField
            sx={{ minWidth: 150 }}
            select
            id="outlined-basic"
            label="Select Name"
            name="selectName"
            size="small"
            onChange={handleChange}
            value={AssignSearchesForm.values.selectName}
            error={
              AssignSearchesForm.errors.selectName &&
              AssignSearchesForm.touched.selectName
            }
          >
            {filteredArray?.map((option) => (
              <MenuItem key={option.selectName} value={option.selectName}>
                {option.selectName}
              </MenuItem>
            ))}
          </TextField>
        </Grid>
        <Grid item xs={4}>
          <TextField
            id="outlined-basic"
            label="location"
            name="location"
            size="small"
            {...AssignSearchesForm.getFieldProps("location")}
          />
        </Grid>
        <Grid item xs={4}>
          <TextField
            id="outlined-basic"
            label="Select Age"
            name="selectAge"
            size="small"
            {...AssignSearchesForm.getFieldProps("selectAge")}
          />
        </Grid>
        <Grid item xs={4}>
          <Button
            onClick={() => {
              AssignSearchesForm.handleSubmit();
              // AssignSearchesForm.resetForm();
              // AssignSearchesForm.setFieldValue("selectName","")
              // AssignSearchesForm.setFieldValue("selectAge","")
              // AssignSearchesForm.setFieldValue("location","")
            }}
            variant="contained"
          >
            Add
          </Button>
        </Grid>
      </Grid>

      <Table teamdata={teamdata} />
    </div>
  );
}

您可以利用 formik 的 onSubmit 函数中的第二个参数 formikHelper

dev-developer 在评论中指出的更好方法:

onSubmit: (values, formikHelper) => {
      setTeamData([values, ...teamdata]);
      formikHelper.resetForm();
    }

如果 resetForm() 没有用,另一种替代方法。

onSubmit: (values, formikHelper) => {
      setTeamData([values, ...teamdata]);
      formikHelper.setFieldValue("selectName", "");
      formikHelper.setFieldValue("selectAge", "");
      formikHelper.setFieldValue("location", "");
    }

这里是修改后的code sandbox