(React, Formik & Yup) 禁用 or/and 更改提交按钮的 class

Question

因此，我在 React App 中制作了一个注册表单，使用 Bootstrap 作为样式，使用 Formik 和 Yup 进行验证。我想将提交按钮 class 更改为 'btn-outline-danger' 并在表单输入有效之前将其禁用。我知道它不会影响实际功能，但无论如何我想用按钮的样式进行操作。

import React from 'react';
import { Button, Form as FormStrap } from 'react-bootstrap';
import { Link } from 'react-router-dom';
import * as yup from 'yup';
import { Formik, Form, Field } from 'formik';

const REGISTRATION_SCHEMA = yup.object().shape({
    name: yup
        .string()
        .min(2, 'Too Short!')
        .max(24, 'Too Long!')
        .required('Required'),
    email: yup.string().email('Invalid email').required('Required'),
    password: yup
        .string()
        .min(6, 'Too Short!')
        .max(14, 'Too Long!')
        .required('Required'),
    passwordConfirmation: yup
        .string()
        .oneOf([yup.ref('password'), null], 'Passwords do not match'),
});

export default function RegistrationForm() {
    return (
        <>
            <Formik
                validationSchema={REGISTRATION_SCHEMA}
                initialValues={{
                    name: '',
                    email: '',
                    password: '',
                    passwordConfirmation: '',
                }}
                onSubmit={(values) => {
                    // same shape as initial values
                    console.log(values);
                }}
                // validate={validate}
            >
                {({ handleSubmit, handleChange, values, touched, errors }) => (
                    <Form id='registration-form' onSubmit={handleSubmit}>
                        <FormStrap.Group className='mb-3' controlId='registration-name'>
                            <FormStrap.Label>Name</FormStrap.Label>
                            <Field
                                className='form-control'
                                type='text'
                                placeholder='Enter name'
                                name='name'
                                value={values.name}
                                onChange={handleChange}
                            />
                            {errors.name && touched.name ? (
                                <FormStrap.Text>{errors.name}</FormStrap.Text>
                            ) : null}
                        </FormStrap.Group>
                        <FormStrap.Group className='mb-3' controlId='registration-email'>
                            <FormStrap.Label>Email </FormStrap.Label>
                            <Field
                                className='form-control'
                                type='email'
                                placeholder='Enter email'
                                name='email'
                                value={values.email}
                                onChange={handleChange}
                            />
                            {errors.email && touched.email ? (
                                <FormStrap.Text>{errors.email}</FormStrap.Text>
                            ) : null}
                        </FormStrap.Group>
                        <FormStrap.Group className='mb-3' controlId='registration-password'>
                            <FormStrap.Label>Password</FormStrap.Label>
                            <Field
                                className='form-control'
                                type='password'
                                placeholder='Enter password'
                                name='password'
                                value={values.password}
                                onChange={handleChange}
                            />
                            {errors.password && touched.password ? (
                                <FormStrap.Text>{errors.password}</FormStrap.Text>
                            ) : null}
                            <Field
                                className='mt-2 form-control'
                                type='password'
                                placeholder='Confirm password'
                                name='passwordConfirmation'
                                value={values.passwordConfirmation}
                                onChange={handleChange}
                            />
                            {errors.passwordConfirmation && touched.passwordConfirmation ? (
                                <FormStrap.Text>{errors.passwordConfirmation}</FormStrap.Text>
                            ) : null}
                        </FormStrap.Group>
                        <FormStrap.Group className='mb-3' controlId='registration-submit'>
                            <Button variant='success' type='submit' disabled={!errors}>
                                Sign Up
                            </Button>
                        </FormStrap.Group>
                        <FormStrap.Group className='mb-3'>
                            <FormStrap.Text className='text-muted'>
                                Already have an account? <Link to='/login'>Sign in now</Link>
                            </FormStrap.Text>
                        </FormStrap.Group>
                    </Form>
                )}
            </Formik>
        </>
    );
}

Answer 1

我只重写按钮部分

<FormStrap.Group className='mb-3' controlId='registration-submit'>
    <Button
            variant='success'
            type='submit'
            disabled={Object.keys(errors).length > 0}
            className={`${Object.keys(errors).length > 0 ? 'btn-outline-danger': ''}`}>
        Sign Up
    </Button>
</FormStrap.Group>

(React, Formik & Yup) 禁用 or/and 更改提交按钮的 class

(React, Formik & Yup) Disable or/and change a class of the submit button

reactjs

react-bootstrap

formik

yup