如何禁用与Formik集成的MUI提交按钮？

Question

我正在尝试将Formik与MUI集成以具有按钮组件，如下所示：

import React from "react";
import { Button } from "@mui/material";
import { useFormikContext } from "formik"; 

const ButtonWrapper = ({ children, ...otherProps }) => {
    const { submitForm } = useFormikContext();

    const handleSubmit = () => {
        submitForm();
    };

    const configButton = {
        ...otherProps,
        variant: "contained",
        color: "primary",
        fullWidth: true,
        onClick: handleSubmit,
    };

    return <Button {...configButton}>{children}</Button>;
};

export default ButtonWrapper;

这是我使用上述代码段，但我想知道如何在这两种情况下禁用提交按钮：1：1根据形式的有效性，2。

<Grid item xs={12}>              
  <ButtonWrapper>Submit</ButtonWrapper>
</Grid>

我一直在寻找我应该使用Isvalid，Issubmitting＆amp;肮脏的属性，但我想知道如何将其实现到首先显示的代码中。

如果有帮助，这是表单验证的一部分。

const INITIAL_FORM_STATE = {
    name: "",
    role: "",
};
const FORM_VALIDATION = Yup.object().shape({
    name: Yup.string().required("Required").min(2, "Enter full name"),
    role: Yup.string().required("Required"),
});

const AddUsersAdmin = () => {
    return (
        <Grid container>
            <Grid item xs={12}>
                <Container maxWidth="md">
                    <div>
                        <Formik
                            initialValues={{
                                ...INITIAL_FORM_STATE,
                            }}
                            validationSchema={FORM_VALIDATION}
                            onSubmit={(values) => {
                                console.log(values);
                                console.log(values["role"]);
                            }}
                        >
                            <Form>
                                <Grid container spacing={2}>
                                    <Grid item xs={6}>
                                        <TextfieldWrapper name="name" label="Name" />
                                    </Grid>
                                    <Grid item xs={6}>
                                        <SelectWrapper name="role" label="Role" options={role} />
                                    </Grid>
                                    <Grid item xs={12}>
                                        <ButtonWrapper disabled>Submit</ButtonWrapper>
                                    </Grid>
                                </Grid>
                            </Form>
                        </Formik>
                    </div>
                </Container>
            </Grid>
        </Grid>

    );
};

Answer 1

这是一个示例，如何通过无效的形式传递残疾人道具。

import React from 'react';
import { Formik, Form, Field } from 'formik';
import * as Yup from 'yup';

const SignupSchema = Yup.object().shape({
  firstName: Yup.string()
    .min(2, 'Too Short!')
    .max(50, 'Too Long!')
    .required('Required'),
  });

export const ValidationSchemaExample = () => (
  <div>
    <h1>Signup</h1>
    <Formik
      initialValues={{
        firstName: '',
      }}
      validationSchema={SignupSchema}
      onSubmit={values => {
        // same shape as initial values
        console.log(values);
      }}
    >
      {({ errors, touched }) => (
        <Form>
          <Field name="firstName" />
            <ButtonWrapper disabled={erros.length>0}>Submit</ButtonWrapper>
        </Form>
      )}
    </Formik>
  </div>
);

正如您之前提到的那样，如果您要在提交表单时也要禁用它，请考虑如何通过Isfetching或Isloading（例如iSfetching或isloading），以便您可以使用类似的东西：

<ButtonWrapper disabled={erros.length>0 || isLoading}>Submit</ButtonWrapper>

如果您使用MUI组件，则可以将其集成在一起通过将一些formik道具传递给MUI组件。

示例：

 <TextField
          fullWidth
          id="firstName"
          name="firstName"
          label="firstName"
          value={formik.values.firstName}
          onChange={formik.handleChange}
          error={formik.touched.firstName && Boolean(formik.errors.firstName)}
        />

有关更多详细信息：
https://formik.org/docs/examples/examples/examples/examples/with-material-with-material-paterial-ui