meta.touched在react最终表单的表单提交中没有实现

Question

我也遇到过类似的问题，但这并没有解决我的问题。我正在开发React应用程序和React最终表单，根据React最终表单开发人员的说法，meta.touched在表单提交时是真实的。

我也试过，但问题仍然存在。

我从后台动态生成字段数据，并在UI中呈现它们。

我的代码

<Form
onSubmit={onSubmit}
// validate={validate}
initialValues={ocaFormUserInput}
subscription={{ submitting: true }}
render={({ handleSubmit, submitting }) => (
<form onSubmit={handleSubmit}>
<Grid container>
{formFieldDatum?.blockFields &&
formFieldDatum?.blockFields.length !== 0 &&
formFieldDatum?.blockFields.map((blockField, index) => (
<Grid className={classes.formGrid} item sm={6} xs={12} key={index}>
{blockField.jsonFeild.map((field, fieldKey) => {
return <AllInputFields key={fieldKey} field={field} setInvalid={setInvalid} />;
})}
</Grid>
))}
</Grid>
<div className={classes.buttonBox}>
<Button className={classes.cancelBtn} onClick={prevFormProgress} variant="outlined" disabled={activeStep === 0}>
PREVIOUS
</Button>
<Button
className={classes.nextBtn}
onSubmit={!invalid ? handleActiveStep : undefined}
type="submit"
disabled={activeStep === 4 && submitting}
variant="contained"
>
{activeStep < 4 ? "NEXT" : "SUBMIT"}
</Button>
</div>
</form>

AllInputFields组件

if (inputField.fieldDisplayTypeName === "TextField") {
return (
<FormControl variant="outlined" className={classes.formControl}>
<Field
name={inputField.name}
validate={inputField.isMandatory && required}
type="text"
fieldProp={inputField}
subscription={{
value: true,
touched: true,
error: true,
}}
>
{({ input, meta, fieldProp }) => (
<>
<TextField
{...input}
className={classes.textField}
variant="outlined"
label={fieldProp.label}
placeholder={fieldProp.placeholder}
required={fieldProp.isMandatory}
InputLabelProps={{
shrink: true,
}}
error={meta.touched && meta.error}
helperText={meta.touched && meta.error && meta.error}
InputProps={{
readOnly: activeStep === reviewTabIndex,
autoComplete: "off",
}}
/>
{fieldProp.isMandatory ? (meta.error ? setInvalid(true) : setInvalid(false)) : undefined}
<pre>{JSON.stringify(meta, 0, 2)}</pre>
</>
)}
</Field>
</FormControl>
);
}

我使用MUI主题进行设计。

请给我建议解决办法。我正在努力寻找解决方案，但找不到。

Answer 1

if (!dirty) {
const fields = form.getRegisteredFields()

fields.map((field) => {
form.focus(field);
form.blur(field);
});
}

Answer 2

我得到了这个问题的完美解决方案。。。。反钩形式。如果你正在启动一个项目，然后使用react钩子形式，它比react最终形式要好得多，并且有一个很棒的社区。

React Hook Form>gt>反应最终形式