如何使用Formik和MUI将值从外部API设置为输入字段？

Question

我正在尝试将API的值输入使用Formik的TextField MUI组件。这个想法是表单是一个组件，我将其用于另一个组件，如果一个值来自API，则将其作为prop将其传递给表单组件，如果未传递，则Textfield组件为渲染以手动输入值。

这是表单组件的代码段使用setFieldValue接收到formik输入中的值。我还启用了enableReInitialize prop of formik。所有这些都是为了使iSvalid Formik prop识别值有效并启用提交按钮。

// FormComponent

onst valSchema = Yup.object().shape({
  batchNo: Yup.string()
    .required('Required'),
  item: Yup.string().required('Required'),
  price: Yup.string().required('Required'),
});

const ItemForm = (props) => {
return (
    <Grid container>
      <Grid item xs={12}>
        <Container maxWidth="md">
          <div>
            <Formik
              enableReinitialize
              initialValues={initialValues}
              validationSchema={valSchema}
              onSubmit={(values) => {
                localHandleSubmit(values);
              }}
            >
              {({ dirty, isValid, errors, handleChange, setFieldValue }) => (
                <Form>
                  <Grid container spacing={2}>
                    {props.batchValue ? (
                      <Grid item xs={12}>
                        <TextField name="batchNo" label="Batch No" value={props.batchValue} onChange={(e) => {
                            handleChange(e);
                            setFieldValue('batchNo', props.batchValue);}} />
                      </Grid>
                    ) : (
                      <Grid item xs={12}>
                        <TextField name="batchNo" label="Batch No" />
                      </Grid>
                    )}
                    <Grid item xs={6}>
                      <TextField name="item" label="Item" />
                    </Grid>
                    <Grid item xs={6}>
                      <TextField name="price" label="Price" />
                    </Grid>
                    <Grid item xs={12}>
                      <Button
                        fullWidth
                        variant="contained"
                        disabled={!isValid || !dirty}
                        type="submit"
                      >
                        {' '}
                        ADD
                      </Button>
                    </Grid>
                  </Grid>
                </Form>
              )}
            </Formik>
          </div>
        </Container>
      </Grid>
    </Grid>
  );
};

这就是我将值传递给表单组件的方式。

<DialogContent dividers>
       <FormComponent batchValue={batch} />
</DialogContent>

我遇到的问题是不能启用提交按钮，因此我发现Isvalid formik prop是错误的，并且需要此值的错误，因此Formik不识别从API传递的值是有效的。

我想知道如何完成这项工作。

Answer 1

我知道这个问题很久以前就问了，但这可能对某人有帮助。诀窍是使用initialValues对象设置输入值，并使用一个空字符串来退缩到普通的可编辑输入。

// Suppose data is the prop returned from an API response
const data = {
  batchNo: "04930",
  item: "Gizmo",
  price: "24.43",
};

<Formik
    enableReinitialize
    initialValues={{
      batchNo: data?.batchNo ?? "",
      item: data?.item ?? "",
      price: data?.price ?? ""
    }}
    validationSchema={valSchema}
    onSubmit={(values) => {
      localHandleSubmit(values);
    }}
  />

现在，输入字段的默认值将是来自API Prop的值。通过利用??无效的合并操作员，当响应不确定时，我们会退缩为空的可编辑输入。

为了将值输入输入，而不是直接传递道具数据，您可以使用持有每个输入数据的formik value对象。

{({ dirty, isValid, errors, handleChange, values }) => (
    <Form>
      <Grid container spacing={2}>
        {values.batchNo ? (
          <Grid item xs={12}>
            <TextField
              name="batchNo"
              label="Batch No"
              value={values.batchNo}
              onChange={handleChange}
            />
          </Grid>
        ) : (
          <Grid item xs={12}>
            <TextField
              name="batchNo"
              label="Batch No"
              value={values.batchNo}
              onChange={handleChange}
            />
          </Grid>
        )}
        <Grid item xs={6}>
          <TextField
            name="item"
            label="Item"
            value={values.item}
            onChange={handleChange}
          />
        </Grid>
        <Grid item xs={6}>
          <TextField
            name="price"
            label="Price"
            value={values.price}
            onChange={handleChange}
          />
        </Grid>
        <Grid item xs={12}>
          <Button
            fullWidth
            variant="contained"
            disabled={!isValid || !dirty}
            type="submit"
          >
            {" "}
            ADD
          </Button>
        </Grid>
      </Grid>
    </Form>
  )}