вот сдесь вроде вис нету. но именно так компоненты и пишут сейчас. это правда хук но не суть скопировал из проекта первое попавшееся
export default function useForm(value) {
const [values, setValues] = useState(value);
const [touched, setTouchedState] = useState({});
const [validity, setValidityState] = useState({});
const generate = type => (name, ownValue) => {
const isCheck = type === "checkbox";
const isRadio = type === "radio";
return {
name,
type,
get checked() {
return isRadio ? ownValue == values[name] : values[name];
},
get value() {
return isRadio ? ownValue : values[name];
},
onChange({ target: { value, checked } }) {
console.log(value, checked)
setValues({ ...values, [name]: isCheck ? checked : value });
},
onBlur(e) {
setTouchedState({ ...touched, [name]: true });
setValidityState({ ...validity, [name]: e.target.validity.valid });
}
};
};
const factory = {
input: generate("input"),
tel: generate("tel"),
checkbox: generate("checkbox"),
radio: generate("radio")
};
return [{ values, validity, touched }, factory];
}