meta.touched 在 react-final-form 中的表单提交上没有实现答案

【问题标题】：meta.touched is not getting true on form submit in react-final-formmeta.touched 在 react-final-form 中的表单提交上没有实现
【发布时间】：2021-04-26 06:23:02
【问题描述】：

我遇到了类似的问题，但这并没有解决我的问题。我正在开发一个 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 主题进行设计。

请建议我解决方案以摆脱困境。我正在寻找解决方案，但找不到。

【问题讨论】：

标签： reactjs validation react-final-form final-form

【解决方案1】：

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

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

【讨论】：

建议另一个包并不能真正回答问题。 FWIW，这里的解决方案似乎是您需要将onBlur={event => input.onBlur(event)} 添加到您的<TextField />
@JosephShambrook 我试过了，即使没有用