const [dataForm, setDataForm] = useState<IDataForm>({
lastName: '',
firstName: '',
middleName: '',
dateOfBirth: '',
numberPhone: '',
email: '',
amount: 1000,
term: 5,
checkbox: false,
});
useEffect(() => {
const storedData = getStoredData<IDataForm>(StorageKeys.GENERAL_INFO);
if (storedData) {
setDataForm(storedData);
}
}, []);if (!dataForm) {
return null; // можно спиннер или что-то такое показать
}const [isClient, setIsClient] = useState(false);
useEffect(() => {
setIsClient(true);
}, []);
if (!isClient) return null; // или показывай что-то временное
return (
<YourFormComponent dataForm={dataForm} />
);
const [dataForm, setDataForm] = useState<IDataForm>({
lastName: "",
firstName: "",
middleName: "",
dateOfBirth: "",
numberPhone: "",
email: "",
amount: 1000,
term: 5,
checkbox: false,
});
// NOTE: Флаг для отслеживания, был ли компонент смонтирован на клиенте
const [isClient, setIsClient] = useState(false);
useEffect(() => {
setIsClient(true);
}, []);
useEffect(() => {
if (isClient) {
const storedData = getStoredData<IDataForm>(StorageKeys.GENERAL_INFO);
if (storedData) {
setDataForm(storedData);
}
}
}, [isClient]);
.container__products {
margin-top: clamp(
30px,
calc(9vw + (1000px - 100vw) * 0.06),
90px
);
}:root {
--min-margin: 30px;
--max-margin: 90px;
--min-width: 700px;
--max-width: 1000px;
}
.container__products {
margin-top: clamp(
var(--min-margin),
calc(
var(--min-margin) +
(var(--max-margin) - var(--min-margin)) *
((100vw - var(--min-width)) / (var(--max-width) - var(--min-width)))
),
var(--max-margin)
);
}
vw есть не что иное как процент от ширины экрана..s {
grid-template-columns: 355px clamp(290px, 43.5vw, 435px);
}
использую библиотеку rc-slider, к сожалению она не предлагает возможности...
.li_block {
display: flex;
justify-content: space-between;
}grid..li_block {
display: grid;
grid-template-columns: auto calc(100% / 3);
justify-items: stretch;
}
{ questionnaireSteps.contactUs && (<StepOneForm
statusStepOneForm={(value) => {setQuestionnaireSteps({...questionnaireSteps, contactUs: value}); console.log(value)}}
statusSmsPhone={(value) => setQuestionnaireSteps({...questionnaireSteps, phoneNumberVerification: value})}
phoneNumber={setPhoneNumber}
/>)}const myFunc = (type, value) => {
console.log(value)
if(type === 'step') setQuestionnaireSteps({...questionnaireSteps, contactUs: value});
if(type === 'sms') (value) => setQuestionnaireSteps({...questionnaireSteps, phoneNumberVerification: value})
};
{ questionnaireSteps.contactUs && (<StepOneForm
statusStepOneForm={value => myFunc('step', value)}
statusSmsPhone={value => myFunc('sms', value)}
phoneNumber={setPhoneNumber}
/>)}
const [ checked, setChecked ] = React.useState(false);<input
type="checkbox"
checked={checked}
onChange={e => setChecked(e.target.checked)}
...<button
disabled={!checked}
...onValueChange={(values) => {
const { formattedValue, value } = values;
// formattedValue = $2,223
// value ie, 2223
this.setState({ profit: formattedValue });
}}