React Formik-Yup Checkbox вызывает такую большую задержку всякий раз, когда я проверяю или снимаю флажок. Вот коды и окно для моей проблемы - https://codesandbox.io/s/currying-cdn-76xys?fontsize=14
Я использовал два метода для своей группы флажков, но ни один из них не работает, как ожидалось. Один с помощью привязки метода handleCheckBox к конструктору, а затем с помощью непосредственного использования handleChange из Formik.
Пожалуйста, помогите мне решить эту проблему.
<code>import React, { Component } from "react";
import { Formik, Form, Field, ErrorMessage } from "formik";
import * as Yup from "yup";
// form constants
const restaurantTypeOptions = ["Delivery", "Take away", "Dine in"];
const restaurantSuitedOptions = ["Family", "Couple", "Cafe"];
const debug = true;
class SignUp extends Component {
constructor(props) {
super(props);
this.state = {
restTypeArr: [],
restSuitArr: []
};
this.handleCheckBox = this.handleCheckBox.bind(this);
}
handleCheckBox(e) {
const newSelection = e.target.value;
let newSelectionArray;
if (Formik.values.restaurantType.indexOf(newSelection) > -1) {
newSelectionArray = Formik.values.restaurantType.filter(
s => s !== newSelection
);
} else {
newSelectionArray = [...Formik.values.restaurantType, newSelection];
}
this.setState(prevState => ({
restTypeArr: newSelectionArray
}));
}
render() {
return (
<div id="signupContainer" className="signinup-container">
<h3 className="mb-4"> Sign Up </h3>
<Formik
initialValues={{
//restaurantType: ['Delivery', 'Take away'],
restaurantType: this.state.restTypeArr,
restaurantSuited: []
}}
validationSchema={Yup.object().shape({
restaurantType: Yup.array().required("Please select at least one"),
restaurantSuited: Yup.array().required("Please select at least one")
})}
onSubmit={(values, { resetForm, setErrors, setSubmitting }) => {
setTimeout(() => {
console.log("Getting form values - ", values);
}, 500);
}}
enableReinitialize={true}
>
{props => {
const {
values,
touched,
errors,
isSubmitting,
handleChange,
handleBlur,
setFieldValue
} = props;
return (
<Form id="signUpForm" className="signinupForm" noValidate>
<div className="form-group">
<label className="form-label" htmlFor="restaurantType">
Restaurant Type
</label>
<div className="checkbox-group">
{restaurantTypeOptions.map((option, index) => {
return (
<label
key={option}
index={index}
className="checkbox-inline"
>
<Field
type="checkbox"
name="restaurantType"
value={option}
id={option}
checked={values.restaurantType.indexOf(option) > -1}
onChange={this.handleCheckBox}
/>
{option}
</label>
);
})}
</div>
<ErrorMessage
name="restaurantType"
component="span"
className="invalid-input"
/>
</div>
{/* Restaurant Type */}
<div className="form-group">
<label className="form-label" htmlFor="restaurantSuited">
Restaurant Suited for
</label>
<div className="checkbox-group">
{restaurantSuitedOptions.map(option => {
return (
<label key={option} className="checkbox-inline">
<Field
type="checkbox"
name="restaurantSuited"
value={option}
checked={
values.restaurantSuited.indexOf(option) > -1
}
//onChange={() => setFieldValue("restaurantSuited", option)}
onChange={() => {
if (values.restaurantSuited.includes(option)) {
values.restaurantSuited.pop(option);
} else {
values.restaurantSuited.push(option);
}
}}
/>
{option}
</label>
);
})}
</div>
<ErrorMessage
name="restaurantSuited"
component="span"
className="invalid-input"
/>
</div>
{/* Restaurant Suited */}
<button
type="submit"
className="btn btn-filled"
disabled={isSubmitting}
>
SignUp
</button>
{/*Submit */}
{debug && (
<>
<pre style={{ textAlign: "left" }}>
<strong>Values</strong>
<br />
{JSON.stringify(values, null, 2)}
Ошибка {JSON.stringify (errors, null, 2)})});}});}}экспорт по умолчанию SignUp;