meta.touched 在以 react-final-form 提交的表单上没有得到正确的结果

问题描述

我遇到了类似的问题，但这并没有解决我的问题。 我正在开发一个 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,2)}</pre>
                        </>
                    )}
                </Field>
            </FormControl>
        );
    }

我正在使用 MUI 主题进行设计。

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

解决方法

我得到了这个问题的完美解决方案...... 反应钩形。如果你正在开始一个项目，那么使用 react-hook-form，它比 React final form 好得多，并且有一个很棒的社区。​​p>

React Hook 表单 >>> React 最终表单