Я создаю флажок компонента , который нуждается в проверке (сделано с Yup
). Но он не извлекает фактическое значение из чекбокса, просто изнутри initialValues
.
Код формы:
<div className='metro custom-pg'>
<ThemeContext.Provider theme={theme}>
<Formik
initialValues={{
text: '',
email: '',
phone: '',
select: '',
multi: [],
checkbox: false,
}}
validationSchema={Schema}
onSubmit={(values) => {
alert(JSON.stringify(values, null, 2));
console.log("values", values);
}}
>
{({
errors,
values,
touched,
handleSubmit,
setFieldValue,
setFieldTouched,
}) => (
<Form onSubmit={handleSubmit}>
<Field
id='text-field'
label='Plain text'
name='text'
type='text'
placeholder='Enter some characters'
component={TextField}
/>
<Field
id='email-field'
label='Email'
name='email'
type='email'
placeholder='Enter your email'
component={TextField}
/>
<Field
id='phone-email'
label='Phone'
name='phone'
type='phone'
placeholder='Enter your phone'
component={TextField}
/>
<Field
id='select'
name='select'
name='select'
label='Select an option'
options={options}
component={Select}
/>
<MultiSelect
id='multiselect'
name='multi'
label='Select multiple options'
options={multiOptions}
value={values.multi}
onChange={setFieldValue}
onBlur={setFieldTouched}
touched={touched.multi}
error={errors.multi}
/>
<Field
type="checkbox"
name='check'
id='check'
label='Check the mark'
component={Checkbox}
/>
<Button variant="primary" type="submit">Submit</Button>
</Form>
)}
</Formik>
</ThemeContext.Provider>
</div>
Код Флажок :
// @flow
import * as React from "react";
import { Field, ErrorMessage } from 'formik';
import { FormGroup, FormLabel } from "react-bootstrap";
export type Props = {
label?: String,
id?: String,
name?: String,
disabled?: boolean,
onChange: function,
className?: string
};
export const Checkbox = ({ label, disabled, id, className }: Props) => {
return (
<FormGroup>
<input type="checkbox" id={name} name={name} />
<label htmlFor={name}> {label}</label>
<ErrorMessage component="div" className="input-error" name="checkbox" />
</FormGroup>
);
};
Checkbox.defaultProps = {
label: 'Default text',
name: 'checkbox',
disabled: false,
className: ''
}
export default Checkbox;