React.useEffect(() => {
(async () => {
try {
const themes = await fetch("/arr").then((data) => data.json());
const activeTheme = Math.floor(themes.length / 2);
const activePlace = Math.floor(themes[activeTheme].subtopics.length / 2);
setThemes(themes);
setActiveTheme(activeTheme);
setActivePlace(activePlace);
} finally {
setIsLoad(false);
}
})();
}, []);
npm i create-react-app -g
create-react-app my-app
const start = 11 * 60 * 60;
const end = 18 * 60 * 60;
const step = 30 * 60;
const count = Math.floor((end - start) / step);
const result: string[] = [];
const date = new Date();
date.setHours(0);
date.setMinutes(0);
date.setSeconds(0);
date.setMilliseconds(0);
const format = (date: Date) => date.toLocaleTimeString('ru-RU', { hour: '2-digit', minute: '2-digit' });
for (let index = 0; index < count; index++) {
const from = new Date(date.getTime() + (start + step * index) * 1000);
const to = new Date(date.getTime() + (start + step * (index + 1)) * 1000);
result.push(`${format(from)} - ${format(to)}`);
}
console.log(result);
/* [ '11:00 - 11:30', '11:30 - 12:00', '12:00 - 12:30', '12:30 - 13:00', '13:00 - 13:30',
'13:30 - 14:00', '14:00 - 14:30', '14:30 - 15:00', '15:00 - 15:30', '15:30 - 16:00',
'16:00 - 16:30', '16:30 - 17:00', '17:00 - 17:30', '17:30 - 18:00' ] */
const handleIndicatorChangeOne = (event) => {
setValue(values => [Number(event.target.value) || '', values[1]]);
};
const handleIndicatorChangeTwo = (event) => {
setValue(values => [values[0], Number(event.target.value) || '']);
};
onChange
у TextField
необходимо поменять на handleIndicatorChangeOne
и handleIndicatorChangeTwo
. react-router-dom
, то заменить BrowserRouter
на HashRouter
. <div className={`${category} ${accessories}`}>
<div className={clsx(category, accessories)}>
import React, { useCallback } from 'react';
import { Formik, Form, useField } from 'formik';
import * as yup from 'yup';
const initialValues = {
firstName: '',
lastName: '',
nickName: '',
email: '',
password: '',
confirmPassword: ''
};
const validationSchema = yup.object().shape({
firstName: yup.string().required('Имя является обязательным'),
lastName: yup.string().required('Фамилия является обязательной'),
nickName: yup.string().required('Имя пользователя является обязательным'),
email: yup
.string()
.email('Введенное значение не является почтой')
.required('Почта является обязательной'),
password: yup
.string()
.min(8, 'Минимальная длина пароля 8 символов')
.required('Пароль является обязательным'),
confirmPassword: yup
.string()
.oneOf([yup.ref('password'), null], 'Пароли не совпадают')
.min(8, 'Минимальная длина пароля 8 символов')
.required('Пароль является обязательным')
});
const ExampleField = ({ name, label, ...props }) => {
const [field, meta, helpers] = useField(name);
return (
<label>
{label}
<input
name={name}
value={field.value}
onChange={field.onChange}
onBlur={field.onBlur}
{...props}
/>
{meta.error !== undefined && meta.touched && <div>{meta.error}</div>}
</label>
);
};
const ExampleForm = () => {
const handleSubmit = useCallback((values, helpers) => {
console.log(values);
helpers.setSubmitting(false);
}, []);
return (
<Formik
initialValues={initialValues}
validationSchema={validationSchema}
validationOnBlur
onSubmit={handleSubmit}
>
{({ values, errors, touched, isValid, isSubmitting }) => (
<Form>
<ExampleField label="Имя" name="firstName" />
<ExampleField label="Фамилия" name="lastName" />
<ExampleField label="Имя пользователя" name="nickName" />
<ExampleField label="Почта" type="email" name="email" />
<ExampleField label="Пароль" type="password" name="password" />
<ExampleField label="Подтверждение пароля" type="password" name="confirmPassword" />
<button type="submit" disabled={!isValid || isSubmitting}>
Отправить
</button>
<pre>{JSON.stringify({ values, errors, touched }, null, 2)}</pre>
</Form>
)}
</Formik>
);
};