首先，我做了一个用formik验证的表单。在那之后，我的团队决定用react-bootstrap来设计风格。这个库有一个<Form>对象，和Formik一样。但它没有正确地验证。它要么将输入字段始终抛出为无效，从而将其边框变为红色，要么始终正确。
我怀疑这是一个组合库的问题，这些库既可以与表单一起工作，又具有相同名称的组件。我设法使它与原始的 Bootstrap 库工作。但我仍然想知道为什么会发生这种情况，如果它有一些解决方案。

import React, {useState} from 'react';
import '../FormStyles.css';
import * as yup from "yup";
import { Formik, Form, ErrorMessage, Field } from 'formik';

const TestimonialForm = ({ testimonial = null }) => {

     const initialValues = {
    name: testimonial?.name || "",
    description: testimonial?.description || "",
    image: testimonial?.image || ""
  };

 const schema = yup.object().shape({
      name: yup.string().min(4, "Name must be at least 4 characters long.").required("You have to provide a name."),
      description: yup.string().required("You have to provide a description."),
      image: yup.string()
      .matches(
        /\.(jpg|png)$/,
        "We only support .png or .jpg format files."
      )
      .required("You have to provide an image.")
    });

<Formik
        initialValues= {initialValues}
        validationSchema = {schema}
        >

这是带有Formik组件的表单

{({}) => (
            <div>
        <Form className="form-container">
            <Field 
            className="input-field" 
            type="text" 
            name="name" 
            placeholder="Testimonial title"/>
            <ErrorMessage name="name" />
            <Field 
            className="input-field" 
            type="file" 
            name="image" 
            placeholder="Testimonial image"/>
           <ErrorMessage name="image" />
            <button className="submit-btn" type="submit">Send</button>
        </Form>
           </div>
        )}
        </Formik>

下面是react-bootstrap组件（我只修改了导入值）。

{({touched, errors}) => (
            <div>
        <Form className="form-container" onSubmit={onSubmit}>
            <Form.Group controlId="name">
            <Form.Control
            className="input-field" 
            type="text" 
            name="name" 
            isInvalid={name.touched && errors.name}
            placeholder="Testimonial title"/>
                        <Form.Control.Feedback type="invalid">
              {errors.name}
            </Form.Control.Feedback>
             </Form.Group>
            <Form.Group controlId="image">
            <Form.Control
            className="input-field" 
            type="file" 
            name="image" 
            isInvalid={image.touched && errors.image}
            />
                      <Form.Control.Feedback type="invalid">
              {errors.image}
            </Form.Control.Feedback>
             </Form.Group>
            <button className="submit-btn" type="submit">Send</button>
            {message && <div>{message}</div>}
        </Form>
           </div>
        )}
        </Formik>