ВА
отличная либа. подошла прям как надо.
Size: a a a
ВА
cd
М
cb
cb
cb
cb
cb
cb
ВД
ВД
Р
Hʜ
Р
import React, { useState } from "react";
import Container from '@material-ui/core/Container';
import mas_reg from './mas_reg.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import { Map_spec } from './Map_spec';
export const Specialization = ({ formData, setForm, navigation}) => {
const [form, setFormValue] = useState({
name: '',
weight: '',
height: '',
food: '',
Косметология: false,
Брови: true,
});
const handleChange = (e) => {
const {name, value, type, checked} = e.target;
console.log({...e.target});
setFormValue((prevFormValues) => ({
...prevFormValues,
[name]: type === 'checkbox' ? checked : value,
}));
};
const { firstName, lastName, nickName } = formData;
return (
<Container maxWidth="lg" style={{ margin:'auto' }}>
<h1 className="main_h1">Услуги и специальность </h1>
<p className="top_p">Выберите одну или несколько специальностей</p>
<div className="wraper">
{Map_spec.map((checkbox, key) => (
<>
<input type="checkbox" className="custom-checkbox"
id={checkbox.label}
form={form}
name={checkbox.label}
value={checkbox.label}
onChange={handleChange}
checked={form[checkbox.label]}
/>
<label
key={checkbox.label}
htmlFor={checkbox.label}><span style={{textAlign:'left', width:'50%'}}>{checkbox.label}</span><div className="lined"></div></label>
</>
))}
</div>
<button
className="dale_2"
style={{ marginTop:'1rem' }}
onClick={() => navigation.next()}>Далее</button>
</Container>
)
}
Р
Р
Р
Hʜ
handleChange
сетишь значения чекбоксов в форму, по идее надо бы в стейтHʜ
Р