Tochka
/
legacy
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
pairent_frontend_react/src/pages/IndexPage/index.jsx
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,47 +112,44 @@ 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 <Filters>
initialValues={def_form} <FilterText>Фильтры</FilterText>
onSubmit={async (values) => {
console.log(values); <PeriodFilter>
}} <PeriodButton
> active={state.per_day}
<Form> onClick={() => setState({per_day: !state.per_day})}>
<Filters> <SVGIcon src='/images/icons/calendar-day.svg' width='14' height='14' />
<FilterText>Фильтры</FilterText> Посуточно
</PeriodButton>
<PeriodFilter> <PeriodButton
<PeriodButton> active={state.per_month}
<SVGIcon src='/images/icons/calendar-day.svg' width='14' height='14' /> onClick={() => setState({per_month: !state.per_month})}>
Посуточно <SVGIcon src='/images/icons/calendar.svg' width='14' height='14' />
</PeriodButton> Ежемесячно
<PeriodButton> </PeriodButton>
<SVGIcon src='/images/icons/calendar.svg' width='14' height='14' /> <ClearButton>
Ежемесячно <SVGIcon src='/images/icons/eraser-fill.svg' width='14' height='14' />
</PeriodButton> Сбросить
<ClearButton> </ClearButton>
<SVGIcon src='/images/icons/eraser-fill.svg' width='14' height='14' /> </PeriodFilter>
Сбросить
</ClearButton>
</PeriodFilter>
<SearchBarFilter> <SearchBarFilter>
asbvccxcz asbvccxcz
</SearchBarFilter> </SearchBarFilter>
<SubmitBtn type='submit'> <SubmitBtn type='submit'>
<SVGIcon src='/images/icons/search.svg' width='14' height='14' /> <SVGIcon src='/images/icons/search.svg' width='14' height='14' />
Показать варианты Показать варианты
</SubmitBtn> </SubmitBtn>
</Filters> </Filters>
</Form>
</Formik>
); );
} }