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

64
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 { Scrollbar, Navigation } from 'swiper/core';
import ISVGIcon from '../../components/UI/Icon/SVGIcon';
import { Formik, Field, Form } from 'formik';
import styled from 'styled-components';
import 'swiper/css';
@ -113,47 +112,44 @@ const FiltersForm = () => {
per_month: false
};
const [ state, setState ] = useState(def_form);
const submitted = (a) => {
console.log(a);
}
return (
<Formik
initialValues={def_form}
onSubmit={async (values) => {
console.log(values);
}}
>
<Form>
<Filters>
<FilterText>Фильтры</FilterText>
<Filters>
<FilterText>Фильтры</FilterText>
<PeriodFilter>
<PeriodButton>
<SVGIcon src='/images/icons/calendar-day.svg' width='14' height='14' />
Посуточно
</PeriodButton>
<PeriodButton>
<SVGIcon src='/images/icons/calendar.svg' width='14' height='14' />
Ежемесячно
</PeriodButton>
<ClearButton>
<SVGIcon src='/images/icons/eraser-fill.svg' width='14' height='14' />
Сбросить
</ClearButton>
</PeriodFilter>
<PeriodFilter>
<PeriodButton
active={state.per_day}
onClick={() => setState({per_day: !state.per_day})}>
<SVGIcon src='/images/icons/calendar-day.svg' width='14' height='14' />
Посуточно
</PeriodButton>
<PeriodButton
active={state.per_month}
onClick={() => setState({per_month: !state.per_month})}>
<SVGIcon src='/images/icons/calendar.svg' width='14' height='14' />
Ежемесячно
</PeriodButton>
<ClearButton>
<SVGIcon src='/images/icons/eraser-fill.svg' width='14' height='14' />
Сбросить
</ClearButton>
</PeriodFilter>
<SearchBarFilter>
asbvccxcz
</SearchBarFilter>
<SearchBarFilter>
asbvccxcz
</SearchBarFilter>
<SubmitBtn type='submit'>
<SVGIcon src='/images/icons/search.svg' width='14' height='14' />
Показать варианты
</SubmitBtn>
</Filters>
</Form>
</Formik>
<SubmitBtn type='submit'>
<SVGIcon src='/images/icons/search.svg' width='14' height='14' />
Показать варианты
</SubmitBtn>
</Filters>
);
}