create form using states instead of formik

formik (or any other form framework) doesn't support setting field value programmatically. filter form uses 2 fields that are triggered by clicking a button, and that's the reason there's no other workaround. probably needs a rewrite
This commit is contained in:
b1ek 2023-05-08 20:32:50 +10:00
parent ff321143aa
commit b5828134a9
Signed by: blek
GPG Key ID: 14546221E3595D0C
1 changed files with 31 additions and 35 deletions

View File

@ -2,7 +2,6 @@ import React, { useState } from "react";
import { Swiper, SwiperSlide } from 'swiper/react'; import { Swiper, SwiperSlide } from 'swiper/react';
import { Scrollbar, Navigation } from 'swiper/core'; import { Scrollbar, Navigation } from 'swiper/core';
import ISVGIcon from '../../components/UI/Icon/SVGIcon'; import ISVGIcon from '../../components/UI/Icon/SVGIcon';
import { Formik, Field, Form } from 'formik';
import styled from 'styled-components'; import styled from 'styled-components';
import 'swiper/css'; import 'swiper/css';
@ -113,27 +112,26 @@ const FiltersForm = () => {
per_month: false per_month: false
}; };
const [ state, setState ] = useState(def_form);
const submitted = (a) => { const submitted = (a) => {
console.log(a); console.log(a);
} }
return ( return (
<Formik
initialValues={def_form}
onSubmit={async (values) => {
console.log(values);
}}
>
<Form>
<Filters> <Filters>
<FilterText>Фильтры</FilterText> <FilterText>Фильтры</FilterText>
<PeriodFilter> <PeriodFilter>
<PeriodButton> <PeriodButton
active={state.per_day}
onClick={() => setState({per_day: !state.per_day})}>
<SVGIcon src='/images/icons/calendar-day.svg' width='14' height='14' /> <SVGIcon src='/images/icons/calendar-day.svg' width='14' height='14' />
Посуточно Посуточно
</PeriodButton> </PeriodButton>
<PeriodButton> <PeriodButton
active={state.per_month}
onClick={() => setState({per_month: !state.per_month})}>
<SVGIcon src='/images/icons/calendar.svg' width='14' height='14' /> <SVGIcon src='/images/icons/calendar.svg' width='14' height='14' />
Ежемесячно Ежемесячно
</PeriodButton> </PeriodButton>
@ -152,8 +150,6 @@ const FiltersForm = () => {
Показать варианты Показать варианты
</SubmitBtn> </SubmitBtn>
</Filters> </Filters>
</Form>
</Formik>
); );
} }