首先,我做了一个用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>
1条答案
按热度按时间g0czyy6m1#
我初始化bootstrap Form import如下:从react-bootstrap导入{Form as myForm};你可以这样使用它:<myForm.Control type='text' id='name'/>
通过这种方式,它不会覆盖formik的Form组件