{"id":316037,"date":"2021-01-06T21:00:31","date_gmt":"2021-01-06T21:00:31","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=316037"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=316037","title":{"rendered":"React.js \u2014 \u0444\u043e\u0440\u043c\u043e\u0448\u043b\u0435\u043f\u0441\u0442\u0432\u043e \u0438\u043b\u0438 \u0440\u0430\u0431\u043e\u0442\u0430 \u0441 \u0444\u043e\u0440\u043c\u0430\u043c\u0438 \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0445 \u0445\u0443\u043a\u043e\u0432"},"content":{"rendered":"\n<div class=\"post__text post__text-html post__text_v1\" id=\"post-content-body\">\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/ag\/yc\/sg\/agycsg6n0d0i9q-ionmuik_bgcw.jpeg\"><\/p>\n<p>  <\/p>\n<p>\u0412 \u044d\u0442\u043e\u043c \u043f\u043e\u0441\u0442\u0435 \u0431\u0443\u0434\u0435\u0442 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u0445\u0443\u043a \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f\u043c\u0438 \u0444\u043e\u0440\u043c\u044b \u0438 \u0431\u0443\u0434\u0443\u0442 \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u043d\u044b \u0441\u043f\u043e\u0441\u043e\u0431\u044b \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u043e\u0431\u044a\u0435\u043a\u0442\u0430\u043c\u0438 \u0438 \u043c\u0430\u0441\u0441\u0438\u0432\u0430\u043c\u0438. \u0412 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u0435 \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044e \u0444\u043e\u0440\u043c \u0438 \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438. <\/p>\n<p><a name=\"habracut\"><\/a>  <\/p>\n<p>\u0412 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u0440\u0430\u0431\u043e\u0442\u044b \u0447\u0430\u0441\u0442\u043e \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0440\u0435\u0448\u0430\u0442\u044c \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u0435 \u0437\u0430\u0434\u0430\u0447\u0438. \u0414\u043b\u044f \u0443\u0441\u043a\u043e\u0440\u0435\u043d\u0438\u044f \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0438\u0437 \u043d\u0438\u0445, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0434\u043b\u044f \u0441\u043e\u043a\u0440\u0430\u0449\u0435\u043d\u0438\u044f \u043a\u043e\u0434\u0430 \u0432 \u0446\u0435\u043b\u043e\u043c \u043f\u0440\u0438\u043d\u044f\u0442\u043e \u0434\u0435\u043b\u0438\u0442\u044c \u043a\u043e\u0434 \u043d\u0430 \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0435 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u044b. \u0412 React \u0441 \u0432\u0435\u0440\u0441\u0438\u0438 16.8.0 \u043f\u043e\u044f\u0432\u0438\u043b\u0430\u0441\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0445\u0443\u043a\u0438. \u0414\u0430\u043d\u043d\u0430\u044f \u0441\u0442\u0430\u0442\u044c\u044f \u0437\u0430\u0442\u0440\u0430\u0433\u0438\u0432\u0430\u0435\u0442 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0445 \u0445\u0443\u043a\u043e\u0432. \u0417\u0430\u0440\u0430\u043d\u0435\u0435 \u0445\u043e\u0447\u0443 \u043f\u0440\u0435\u0434\u0443\u043f\u0440\u0435\u0434\u0438\u0442\u044c: \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u043a\u043e\u0434\u0430 \u0438 \u043f\u043e\u0434\u0445\u043e\u0434\u044b, \u043e\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0435 \u043d\u0438\u0436\u0435, \u043d\u0435 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043e\u043f\u0442\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u043c\u0438, \u0438\u0445 \u043c\u043e\u0436\u043d\u043e \u0438 \u043d\u0443\u0436\u043d\u043e \u0434\u043e\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u0432 \u0440\u0430\u043c\u043a\u0430\u0445 \u0441\u0432\u043e\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432 \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438. \u0414\u0430\u043d\u043d\u044b\u0439 \u043a\u043e\u0434 \u2013 \u044d\u0442\u043e \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0430\u044f \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0438\u043d\u043f\u0443\u0442\u0430\u043c\u0438.<\/p>\n<p>  <\/p>\n<p>\u041a \u0441\u043b\u043e\u0432\u0443, \u0432 React \u0434\u043b\u044f \u0443\u0434\u043e\u0431\u043d\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0444\u043e\u0440\u043c\u0430\u043c\u0438 \u0443\u0436\u0435 \u043d\u0430\u0431\u0440\u0430\u043b\u0438 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u043e\u0441\u0442\u044c 3 \u043e\u0442\u043b\u0438\u0447\u043d\u044b\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438. \u042d\u0442\u043e <a href=\"https:\/\/formik.org\/\" rel=\"nofollow\">Formik<\/a>, <a href=\"https:\/\/redux-form.com\/8.3.0\/\" rel=\"nofollow\">Redux Form<\/a> \u0438 <a href=\"https:\/\/react-hook-form.com\/\" rel=\"nofollow\">React Hook Form<\/a>. \u041d\u0430 \u0441\u0430\u0439\u0442\u0435 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0433\u043e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u044b \u043f\u043b\u044e\u0441\u044b \u043f\u0435\u0440\u0435\u0434 \u043a\u043e\u043d\u043a\u0443\u0440\u0435\u043d\u0442\u0430\u043c\u0438.<\/p>\n<p>  <\/p>\n<h3 id=\"dlya-nachala\">\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430<\/h3>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c React \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435. \u0421\u0434\u0435\u043b\u0430\u0435\u043c \u044d\u0442\u043e \u0447\u0435\u0440\u0435\u0437 <a href=\"https:\/\/ru.reactjs.org\/docs\/create-a-new-react-app.html\" rel=\"nofollow\">Create React App<\/a>. \u0415\u0441\u043b\u0438 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u043f\u043e \u0441\u0441\u044b\u043b\u043a\u0435 \u0431\u0443\u0434\u0435\u0442 \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e, \u0442\u043e <a href=\"https:\/\/github.com\/facebook\/create-react-app\" rel=\"nofollow\">github<\/a>.<\/p>\n<p>  <\/p>\n<p>\u0422\u0430\u043a \u043a\u0430\u043a \u044f \u044f\u0432\u043b\u044f\u044e\u0441\u044c \u043f\u043e\u043a\u043b\u043e\u043d\u043d\u0438\u043a\u043e\u043c TypeScript, \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b \u0433\u043e\u0442\u043e\u0432\u044b\u0439 \u0448\u0430\u0431\u043b\u043e\u043d \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u043d\u0438\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u043a\u043e\u043c\u0430\u043d\u0434\u0443:<\/p>\n<p>  <\/p>\n<pre><code class=\"bash\">npx create-react-app react-custom-forms-article  --template typescript<\/code><\/pre>\n<p>  <\/p>\n<p>\u041d\u0430\u0448 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0439 \u0445\u0443\u043a \u043d\u0435 \u0434\u043e\u043b\u0436\u0435\u043d \u043f\u043e\u0442\u0440\u0435\u0431\u043e\u0432\u0430\u0442\u044c \u0441\u0435\u0440\u044c\u0435\u0437\u043d\u044b\u0445 \u0434\u043e\u0440\u0430\u0431\u043e\u0442\u043e\u043a \u0433\u043e\u0442\u043e\u0432\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u0435\u0441\u043b\u0438 \u0432 \u043d\u0438\u0445 \u043d\u0435 \u043f\u0440\u0438\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u043d\u0438 \u043e\u0434\u043d\u0430 \u0438\u0437 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0444\u043e\u0440\u043c\u0430\u043c\u0438. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0435\u0433\u043e \u0432\u043f\u043e\u043b\u043d\u0435 \u043c\u043e\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0432\u043d\u0435\u0434\u0440\u0438\u0442\u044c \u0438 \u0432 \u0433\u043e\u0442\u043e\u0432\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442.<\/p>\n<p>  <\/p>\n<h3 id=\"pristupaya-k-realizacii-huka\">\u041f\u0440\u0438\u0441\u0442\u0443\u043f\u0430\u044f \u043a \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0445\u0443\u043a\u0430<\/h3>\n<p>  <\/p>\n<p>\u041f\u0435\u0440\u0435\u0434 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435\u043c \u0445\u0443\u043a\u0430 \u043d\u0430\u0434\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f, \u043a\u0430\u043a \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u0444\u043e\u0440\u043c\u043e\u0439 \u0438 \u0435\u0435 \u043f\u043e\u043b\u044f\u043c\u0438. \u0414\u043b\u044f \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u0430 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043e\u0434\u0438\u043d \u043e\u0431\u044a\u0435\u043a\u0442 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0444\u043e\u0440\u043c\u044b, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u0431\u0443\u0434\u0443\u0442 \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u043f\u043e\u043b\u044f \u0438 \u0438\u0445 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438. \u041e\u0431\u044a\u044f\u0432\u043b\u0435\u043d\u0438\u0435 \u044d\u0442\u043e\u0433\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u0432\u044b\u043d\u0435\u0441\u0435\u043d\u043e \u0437\u0430 \u043a\u043e\u0434 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0438 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a.<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ App.tsx const formInputs = {   firstName: {},   lastName: '', }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0412 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u043c \u0444\u043e\u0440\u043c\u0443.<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ App.tsx const App = () =&gt; {   const { fields, handleSubmit } = useForm(formInputs);    const { firstName } = fields;   return &lt;&gt;&lt;\/&gt;; }<\/code><\/pre>\n<p>  <\/p>\n<p><strong>handleSubmit<\/strong> \u2013 \u043c\u0435\u0442\u043e\u0434, \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u044e\u0449\u0438\u0439 callback-\u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u044e\u0449\u0438\u0439 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0432\u0441\u0435\u0445 \u043f\u043e\u043b\u0435\u0439.<br \/>  <strong>fields<\/strong> \u2013 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u0432\u0438\u0434\u0430 &quot;\u043a\u043b\u044e\u0447-\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435&quot;, \u0432 \u043d\u0435\u0439 \u0431\u0443\u0434\u0443\u0442 \u0445\u0440\u0430\u043d\u0438\u0442\u044c\u0441\u044f \u0432\u0441\u0435 \u043e\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0435 \u0440\u0430\u043d\u0435\u0435 \u043f\u043e\u043b\u044f \u0444\u043e\u0440\u043c\u044b \u0441 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0435\u0439, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440: \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u0441 \u0442\u0435\u043a\u0441\u0442\u043e\u043c \u043e\u0448\u0438\u0431\u043a\u0438, \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u043e\u043b\u044f, \u0444\u043b\u0430\u0433 \u0432\u0430\u043b\u0438\u0434\u043d\u043e\u0441\u0442\u0438 \u043f\u043e\u043b\u044f \u0438 \u0442\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430, \u0447\u0442\u043e \u0431\u0443\u0434\u0443\u0442 \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u044b \u0432 \u043e\u0431\u044a\u0435\u043a\u0442\u0435 \u043f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u0444\u043e\u0440\u043c\u044b.<\/p>\n<p>  <\/p>\n<p>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432\u0435\u0440\u043d\u0435\u0442 \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0442\u0430\u043a\u0443\u044e \u0432\u0435\u0440\u0441\u0442\u043a\u0443.<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ App.tsx \/\/ \u041c\u0435\u0442\u043e\u0434 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0444\u043e\u0440\u043c\u044b \u043f\u0440\u0438 \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u043d\u0438\u0435 onSubmit const onSubmit = ({ values }: { values: IValues }) =&gt; {   console.log(values, 'submit'); }  return (   &lt;div className=&quot;App&quot;&gt;     &lt;form onSubmit={handleSubmit(onSubmit)}&gt;       &lt;input type=&quot;text&quot; value={firstName.value} onChange={firstName.setState}\/&gt;     &lt;\/form&gt;   &lt;\/div&gt; );<\/code><\/pre>\n<p>  <\/p>\n<h3 id=\"useform\">useForm<\/h3>\n<p>  <\/p>\n<p>\u041f\u0440\u0438\u0441\u0442\u0443\u043f\u0438\u043c \u043a \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0445\u0443\u043a\u0430. \u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u0440\u043e\u0439\u0442\u0438\u0441\u044c \u043f\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u0443 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0444\u043e\u0440\u043c\u044b. \u0412\u043e \u0432\u0440\u0435\u043c\u044f \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0430 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442\u044c \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u0438 \u043e\u0431\u044a\u044f\u0432\u043b\u0435\u043d\u0438\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0445 \u0434\u0430\u043b\u0435\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432.<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ hooks\/useForm.ts export const useForm = (initialFields: any = {}) =&gt; {   const form = Object.entries(initialFields).reduce((fields, [name, value]: any[]) =&gt; {     const isString = typeof value === 'string';      const field = {       [name]: {         value: (isString &amp;&amp; value) || ((!isString &amp;&amp; value.value) || ''),         setState: (value: ChangeEvent&lt;HTMLInputElement&gt;) =&gt; handleInput(value, name),         ...(!isString &amp;&amp; value),       }     }      return { ...fields, ...field };   }, {});<\/code><\/pre>\n<p>  <\/p>\n<p>\u0412 \u044d\u0442\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043a\u043e\u0434\u0430 \u0434\u043b\u044f \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u0430 \u0438\u0442\u0435\u0440\u0430\u0446\u0438\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043c\u0435\u0442\u043e\u0434 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 <strong>entries<\/strong>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043c\u0430\u0441\u0441\u0438\u0432 \u0432\u0438\u0434\u0430 <em>[[propName, propValue], [propName, propValue]]<\/em>, \u0438 \u043c\u0435\u0442\u043e\u0434 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u043c\u0430\u0441\u0441\u0438\u0432\u0430\u043c\u0438 <strong>reduce<\/strong>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u0441\u043e\u0431\u0440\u0430\u0442\u044c \u043e\u0431\u044a\u0435\u043a\u0442 \u0437\u0430\u043d\u043e\u0432\u043e. \u0412 \u0446\u0435\u043b\u043e\u043c \u0432\u0441\u0435 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043d\u0435\u043f\u043b\u043e\u0445\u043e, \u043d\u043e \u043d\u0435 \u0445\u0432\u0430\u0442\u0430\u0435\u0442 \u043c\u0435\u0442\u043e\u0434\u043e\u0432 \u0434\u043b\u044f \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043f\u043e\u043b\u0435\u0439. \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c React Hook.<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ hooks\/useForm.ts ... const [fields, setState] = useState&lt;any&gt;(form);  const handleInput = (element: ChangeEvent&lt;HTMLInputElement&gt;, name: string) =&gt; {   const input = fields[name];   const value = element.target.value;   const field = { ...input,  value };    setState(prevState =&gt; ({ ...prevState, [name]: field }); }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0417\u0434\u0435\u0441\u044c \u0437\u0430\u0432\u043e\u0434\u0438\u0442\u0441\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0434\u043b\u044f \u043f\u043e\u043b\u0435\u0439 \u0444\u043e\u0440\u043c\u044b, \u0438 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0433\u043e\u0442\u043e\u0432\u0430\u044f \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u0444\u043e\u0440\u043c\u044b. \u0424\u0443\u043d\u043a\u0446\u0438\u044f <strong>handleInput<\/strong> \u0431\u0443\u0434\u0435\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u0430 \u0434\u043b\u044f \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445. \u041a\u0430\u043a \u0432\u0438\u0434\u043d\u043e \u0438\u0437 \u043a\u043e\u0434\u0430, \u0441\u0442\u0435\u0439\u0442 \u0431\u0443\u0434\u0435\u0442 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e. \u042d\u0442\u043e \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430 \u0445\u0443\u043a\u0430 useState \u0438 \u0442\u0435\u043a\u0443\u0449\u0435\u0439 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438. \u0415\u0441\u043b\u0438 \u0431\u044b \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f\u043c\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0430\u0441\u044c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 RxJs \u0432\u043c\u0435\u0441\u0442\u043e \u0445\u0443\u043a\u0430 useState, \u0442\u043e \u0431\u044b\u043b\u0430 \u0431\u044b \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0447\u0430\u0441\u0442\u0438\u0447\u043d\u043e, \u043d\u0435 \u043f\u0440\u043e\u0432\u043e\u0446\u0438\u0440\u0443\u044f \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. \u0412 setState \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0442\u0430\u043a\u0436\u0435 \u0447\u0435\u0440\u0435\u0437 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u0433\u043e \u0432\u044b\u0437\u043e\u0432\u0430. \u041f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u0437\u0430\u043f\u0438\u0441\u0438 \u0432\u0438\u0434\u0430 setState({ &#8230;fields, [name]: field }) \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0434\u0440\u0443\u0433\u043e\u0433\u043e \u043f\u043e\u043b\u044f \u043f\u0440\u043e\u0432\u043e\u0446\u0438\u0440\u043e\u0432\u0430\u043b\u043e \u0431\u044b \u0432\u043e\u0437\u0432\u0440\u0430\u0442 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0445 \u043f\u043e\u043b\u0435\u0439 \u043a \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u043c.<\/p>\n<p>  <\/p>\n<p>\u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u043a\u043e\u0434\u0430 \u043f\u0440\u043e\u0438\u043b\u043b\u044e\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u0442 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0444\u043e\u0440\u043c\u044b.<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ hooks\/useForm.ts ... const handleSubmit = (onSubmit: Function) =&gt; (e: FormEvent) =&gt; {     if (e &amp;&amp; e.preventDefault) {       e.preventDefault();     }      const values = Object.entries(fields).reduce(((prev: any, [name, { value }]: any) =&gt; ({ ...prev, [name]: value })), {});      onSubmit({ values });   }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 [\u043a\u0430\u0440\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f] (<a href=\"https:\/\/learn.javascript.ru\/currying-partials\" rel=\"nofollow\">https:\/\/learn.javascript.ru\/currying-partials<\/a>) \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442\u0441\u044f \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u043d\u0430\u044f \u0438\u0437 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0438 \u0434\u0430\u043b\u0435\u0435 \u043f\u0440\u0438 \u0441\u0430\u0431\u043c\u0438\u0442\u0435 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0441 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0430\u043c\u0438 \u0438\u0437 \u0445\u0443\u043a\u0430. \u041a\u0430\u0440\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0432 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0432\u044b\u0448\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0438\u043c\u0435\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0432\u044b\u0437\u0432\u0430\u0442\u044c \u043c\u0435\u0442\u043e\u0434 \u0432 \u0432\u0435\u0440\u0441\u0442\u043a\u0435, \u043d\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044f \u0435\u0433\u043e \u043f\u0440\u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.<\/p>\n<p>  <\/p>\n<p>\u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u0443 \u043d\u0430\u0441 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0441\u044f \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u0439 \u0445\u0443\u043a \u0434\u043b\u044f \u043e\u0431\u044b\u0447\u043d\u044b\u0445 \u0444\u043e\u0440\u043c.<\/p>\n<p>  <\/p>\n<div class=\"spoiler\" role=\"button\" tabindex=\"0\">                         <b class=\"spoiler_title\">\u0412\u0435\u0441\u044c \u043a\u043e\u0434 \u0445\u0443\u043a\u0430<\/b>                         <\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"javascript\">import { ChangeEvent, FormEvent,, useState } from 'react';  export const useForm = (initialFields = {}) =&gt; {   const form = Object.entries(initialFields).reduce((fields, [name, value]: any[]) =&gt; {     const isString = typeof value === 'string';      const field = {       [name]: {         value: (isString &amp;&amp; value) || ((!isString &amp;&amp; value.value) || ''),         setState: (value: ChangeEvent&lt;HTMLInputElement&gt;) =&gt; handleInput(value, name),         ...(!isString &amp;&amp; value),       },     };      return { ...fields, ...field };   }, {});    const [fields, setState] = useState&lt;any&gt;(form);    const handleInput = useCallback(     (element: ChangeEvent&lt;HTMLInputElement&gt;, name: string) =&gt; {       const input = fields[name];       const value = element.target.value;       const field = { ...input, value };        setState(prevState =&gt; ({ ...prevState, [name]: field });     }, [fields, setState]);    const handleSubmit = (onSubmit: Function) =&gt; (e: FormEvent) =&gt; {     if (e &amp;&amp; e.preventDefault) {       e.preventDefault();     }      const values = Object.entries(fields).reduce(((prev: any, [name, {value}]: any) =&gt; ({ ...prev, [name]: value })), {});      onSubmit({ values });   }    return {     handleSubmit,     fields,   } } <\/code><\/pre>\n<\/div><\/div>\n<p>  <\/p>\n<h2 id=\"tipizaciya\">\u0422\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044f<\/h2>\n<p>  <\/p>\n<p>\u042f \u043d\u0435 \u0445\u043e\u0447\u0443 \u043e\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u044d\u0442\u043e\u0439 \u0442\u0435\u043c\u0435, \u0442\u0430\u043a \u043a\u0430\u043a \u0434\u0430\u043d\u043d\u044b\u0439 \u043a\u043e\u0434 \u043c\u043e\u0436\u043d\u043e \u0441\u043f\u043e\u043a\u043e\u0439\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438 \u0431\u0435\u0437 TypeScript, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432 \u043a\u043e\u0434\u0435 \u043c\u043e\u0433\u0443\u0442 \u0432\u043d\u0435\u0437\u0430\u043f\u043d\u043e \u043f\u043e\u044f\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u043a\u0430\u043a\u0438\u0435-\u0442\u043e \u0442\u0438\u043f\u044b, \u0447\u0442\u043e\u0431\u044b \u0432\u0441\u0435 \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e \u0441\u043e\u0431\u0440\u0430\u0442\u044c, \u0432 \u043a\u043e\u043d\u0446\u0435 \u0441\u0442\u0430\u0442\u044c\u0438 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0430 \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 github. <\/p>\n<p>  <\/p>\n<h2 id=\"validaciya\">\u0412\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044f<\/h2>\n<p>  <\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c, \u043a\u043e\u0433\u0434\u0430 \u043d\u0430\u0448 \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u0439 \u0445\u0443\u043a \u0433\u043e\u0442\u043e\u0432, \u0445\u043e\u0447\u0435\u0442\u0441\u044f \u043f\u043e\u0437\u0430\u0431\u043e\u0442\u0438\u0442\u044c\u0441\u044f \u043e \u0435\u0449\u0435 \u043e\u0434\u043d\u043e\u0439 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0435 \u2013 \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438 \u043f\u043e\u043b\u0435\u0439. \u0412\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044f \u0431\u0443\u0434\u0435\u0442 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u0430 \u0447\u0435\u0440\u0435\u0437 \u043c\u0430\u0441\u0441\u0438\u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0439.<\/p>\n<p>  <\/p>\n<p>\u0418\u0442\u0430\u043a, \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043f\u0435\u0440\u0435\u043f\u0438\u0448\u0435\u043c \u0441\u0445\u0435\u043c\u0443. \u0417\u0434\u0435\u0441\u044c \u0443\u043a\u0430\u0437\u0430\u043d \u043c\u0430\u0441\u0441\u0438\u0432 validators \u0434\u043b\u044f \u043e\u0431\u043e\u0438\u0445 \u043f\u043e\u043b\u0435\u0439 \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d \u0444\u043b\u0430\u0433 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u043f\u043e\u043b\u044f.<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ App.tsx ... const formInputs = {   firstName: {     required: true,     validators: [       (s: string) =&gt; !s.length &amp;&amp; '\u041f\u043e\u043b\u0435 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0434\u043b\u044f \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f',       (s: string) =&gt; s.length &lt; 2 &amp;&amp; '\u041c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u0430\u044f \u0434\u043b\u0438\u043d\u0430 \u0441\u0442\u0440\u043e\u043a\u0438 2',       (s: string) =&gt; s.length &lt;= 2 &amp;&amp; '\u0410 \u0442\u0435\u043f\u0435\u0440\u044c 3',       (s: string) =&gt; parseInt(s) &lt; 2 &amp;&amp; '\u0414\u043e\u043b\u0436\u043d\u0430 \u0431\u044b\u0442\u044c \u0446\u0438\u0444\u0440\u0430 \u0431\u043e\u043b\u044c\u0448\u0435 1',     ]   },   datetime: {     validators: [       (s: string) =&gt; new Date(s).getUTCFullYear() &gt; new Date().getUTCFullYear() &amp;&amp; '\u0413\u043e\u0434 \u0440\u043e\u0436\u0434\u0435\u043d\u0438\u044f \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0435 \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e',     ],   }, }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u043e\u043c\u0438\u043c\u043e \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u043e\u0439 \u0441\u0445\u0435\u043c\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0432 \u0445\u0443\u043a \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e <strong>isValid<\/strong>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043f\u0440\u0435\u0449\u0430\u0442\u044c\/\u0440\u0430\u0437\u0440\u0435\u0448\u0430\u0442\u044c \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0443 \u0444\u043e\u0440\u043c\u044b \u043f\u043e \u043a\u043d\u043e\u043f\u043a\u0435. \u0420\u044f\u0434\u043e\u043c \u0441 \u043f\u043e\u043b\u044f\u043c\u0438 \u0442\u0430\u043a\u0436\u0435 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0432\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u043e\u0448\u0438\u0431\u043a\u0430. \u041a \u0441\u043b\u043e\u0432\u0443, \u043e\u0448\u0438\u0431\u043a\u0443 \u0431\u0443\u0434\u0435\u043c \u0432\u044b\u0432\u043e\u0434\u0438\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u00ab\u0442\u0440\u043e\u043d\u0443\u0442\u044b\u0445\u00bb \u043f\u043e\u043b\u0435\u0439.<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ App.tsx ... const { fields, isValid, handleSubmit } = useForm(formInputs); const { firstName, datetime }: Form = fields;  return (     &lt;div className=&quot;App&quot;&gt;       &lt;form onSubmit={handleSubmit(onSubmit)}&gt;         &lt;input type=&quot;text&quot; value={firstName.value} onChange={firstName.setState}\/&gt;         &lt;span&gt;{firstName.touched &amp;&amp; firstName.error}&lt;\/span&gt;         &lt;input type=&quot;date&quot; value={datetime.value} onChange={datetime.setState}\/&gt;         &lt;span&gt;{datetime.touched &amp;&amp; datetime.error}&lt;\/span&gt;         &lt;button disabled={!isValid}&gt;Send form&lt;\/button&gt;       &lt;\/form&gt;     &lt;\/div&gt; );<\/code><\/pre>\n<p>  <\/p>\n<p>\u0420\u0430\u0437\u0431\u0435\u0440\u0435\u043c \u044d\u0442\u043e\u0442 \u043a\u043e\u0434. \u0412 \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043d\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043e\u0436\u0438\u0434\u0430\u0435\u0442\u0441\u044f 2 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0430, <strong>field<\/strong> \u2013 \u043f\u043e\u043b\u0435 \u0438\u043d\u043f\u0443\u0442\u0430, \u0432\u0442\u043e\u0440\u043e\u0439 \u2013 \u043e\u043f\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0439, \u0432 \u043d\u0435\u043c \u0431\u0443\u0434\u0443\u0442 \u0445\u0440\u0430\u043d\u0438\u0442\u044c\u0441\u044f \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0434\u043b\u044f \u043f\u043e\u043b\u044f. \u0414\u0430\u043b\u0435\u0435 \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u0434\u0435\u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0438\u0437\u0430\u0446\u0438\u0438 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u0437\u0430\u0432\u043e\u0434\u044f\u0442\u0441\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 <strong>value<\/strong>, <strong>required<\/strong> \u0438 \u043c\u0430\u0441\u0441\u0438\u0432 \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0439. \u0427\u0442\u043e\u0431\u044b \u043d\u0435 \u043c\u0435\u043d\u044f\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0430, \u0437\u0430\u0432\u043e\u0434\u044f\u0442\u0441\u044f \u043d\u043e\u0432\u044b\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 error \u0438 valid. \u042f \u043e\u0431\u044a\u044f\u0432\u0438\u043b \u0438\u0445 \u0447\u0435\u0440\u0435\u0437 let, \u0442\u0430\u043a \u043a\u0430\u043a \u043c\u0435\u043d\u044f\u044e \u0438\u0445 \u0432 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435. \u0412 \u043a\u043e\u0434\u0435 \u0434\u043e \u043e\u0431\u0445\u043e\u0434\u0430 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u0432\u0430\u043b\u0438\u0434\u0430\u0442\u043e\u0440\u043e\u0432 \u0441\u0442\u043e\u0438\u0442 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u043d\u0430 <strong>required<\/strong>, \u0432 \u0442\u0435\u043b\u0435 \u0443\u0441\u043b\u043e\u0432\u0438\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442\u0441\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u043e\u043b\u044f, \u0438 \u0442\u0430\u043c \u0436\u0435 \u043f\u0440\u043e\u043a\u0438\u0434\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043e\u0448\u0438\u0431\u043a\u0430.<\/p>\n<p>  <\/p>\n<p>\u041c\u044b \u043f\u043e\u0434\u043e\u0448\u043b\u0438 \u043a \u0443\u0441\u043b\u043e\u0432\u0438\u044e, \u0433\u0434\u0435 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e <strong>validators<\/strong>. \u041e\u043d\u0430 \u0434\u043e\u043b\u0436\u043d\u0430 \u0431\u044b\u0442\u044c \u043c\u0430\u0441\u0441\u0438\u0432\u043e\u043c. \u0414\u0430\u043b\u0435\u0435 \u043f\u043e \u043a\u043e\u0434\u0443 \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u043c\u0430\u0441\u0441\u0438\u0432 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u0432 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u0439 \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438 \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u043c\u0435\u0442\u043e\u0434\u0430 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 <strong>map<\/strong>. <strong>validateFn<\/strong> \u2013 \u0437\u0434\u0435\u0441\u044c \u0445\u0440\u0430\u043d\u0438\u0442\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u0432 \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u0442\u0441\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u043e\u043b\u044f \u0438\u0437 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <strong>value<\/strong>. \u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438 \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u0441\u0442\u0440\u043e\u043a\u043e\u0439, \u0442\u0430\u043a \u043a\u0430\u043a \u0432\u044b\u0432\u043e\u0434\u0438\u0442\u044c \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u043c\u0435\u043d\u043d\u043e \u0442\u0435\u043a\u0441\u0442 \u043e\u0448\u0438\u0431\u043a\u0438. \u0415\u0441\u043b\u0438 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043d\u0435 \u0441\u0442\u0440\u043e\u043a\u0430, \u0442\u043e \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0442\u044c\u0441\u044f \u0431\u0443\u0434\u0435\u0442 \u0447\u0442\u043e-\u0442\u043e \u0434\u0440\u0443\u0433\u043e\u0435. \u041a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e \u0437\u0434\u0435\u0441\u044c \u2013 \u043f\u0443\u0441\u0442\u0430\u044f \u0441\u0442\u0440\u043e\u043a\u0430, \u043d\u043e \u0442\u0430\u043c \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0438 \u0434\u0440\u0443\u0433\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 false. \u0412 \u043b\u044e\u0431\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0434\u0430\u043b\u0435\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0444\u0438\u043b\u044c\u0442\u0440\u0430\u0446\u0438\u044f \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u0432 \u0434\u043b\u044f \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u044f \u043f\u0443\u0441\u0442\u044b\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439. \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u043f\u043e\u043b\u0435 \u043e\u0448\u0438\u0431\u043a\u0438 \u043c\u043e\u0433\u043b\u043e \u0431\u044b \u0431\u044b\u0442\u044c \u0438 \u043c\u0430\u0441\u0441\u0438\u0432\u043e\u043c \u043e\u0448\u0438\u0431\u043e\u043a. \u041d\u043e \u0437\u0434\u0435\u0441\u044c \u044f \u0440\u0435\u0448\u0438\u043b \u0432\u044b\u0432\u043e\u0434\u0438\u0442\u044c \u043b\u0438\u0448\u044c \u043e\u0434\u043d\u0443 \u043e\u0448\u0438\u0431\u043a\u0443, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0434\u0430\u043b\u0435\u0435 \u0441\u0442\u043e\u0438\u0442 \u0443\u0441\u043b\u043e\u0432\u0438\u0435 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 result, \u0433\u0434\u0435 \u043f\u0440\u0438\u0441\u0432\u0430\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043e\u0448\u0438\u0431\u043a\u0430 \u0438 \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 <strong>valid<\/strong>. \u0412 \u043a\u043e\u043d\u0446\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f <strong>fieldValidation<\/strong> \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043d\u043e\u0432\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 \u043f\u043e\u043b\u044f, \u0433\u0434\u0435 \u0437\u0430\u043f\u0438\u0441\u0430\u043d\u044b \u0432\u0441\u0435 \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u043d\u044b\u0435 \u0440\u0430\u043d\u0435\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f + \u043d\u043e\u0432\u044b\u0435, \u043c\u043e\u0434\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435.<\/p>\n<p>  <\/p>\n<p>\u0414\u0430\u043b\u0435\u0435 \u044d\u0442\u043e\u0442 \u043c\u0435\u0442\u043e\u0434 \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <strong>handleInput<\/strong> \u0438 <strong>handleSubmit<\/strong>. \u0412 \u043e\u0431\u043e\u0438\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0433\u043e\u043d\u044f\u0442\u044c\u0441\u044f \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044f.<\/p>\n<p>  <\/p>\n<p>\u0412\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044f \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0442\u0430\u043a\u0436\u0435 \u0432 \u0441\u0432\u044f\u0437\u043a\u0435 \u0441 \u043e\u0431\u0449\u0438\u043c \u0444\u043b\u0430\u0433\u043e\u043c <strong>isValid<\/strong>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0437\u0430\u0432\u043e\u0434\u0438\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 useState. \u0421\u0434\u0435\u043b\u0430\u0435\u043c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0434\u043b\u044f \u043e\u0431\u0445\u043e\u0434\u0430 \u043f\u043e\u043b\u0435\u0439. <\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ hooks\/useForm.ts  const [isValid, setFormValid] = useState&lt;boolean&gt;(true); const getFormValidationState = (fields) =&gt; Object.entries(fields).reduce((isValid: any, [_, value]: any) =&gt; Boolean(isValid * value.isValid), true);  const handleInput = (element: ChangeEvent&lt;HTMLInputElement&gt;, name: string) =&gt; {     const input = fields[name];     const value = element.target.value;      const field = {       ...input,       value,       touched: true,       isValid: true,     };      const validatedField = fieldValidation(field);      setState((prevState) =&gt; {       const items = {...prevState, [name]: validatedField};        setFormValid(getFormValidationState(items));       return items;     });   }    const handleSubmit = (onSubmit: Function) =&gt; (e: FormEvent) =&gt; {     if (e &amp;&amp; e.preventDefault) {       e.preventDefault();     }      const fieldsArray = Object.entries(fields);     \/\/ \u0417\u0430\u0431\u0438\u0440\u0430\u0435\u043c \u0442\u043e\u043b\u044c\u043a\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f     const values = fieldsArray.reduce(((prev: any, [name, {value}]: any) =&gt; ({ ...prev, [name]: value })), {});     \/\/ \u0412\u0430\u043b\u0438\u0434\u0438\u0440\u0443\u0435\u043c \u043a\u0430\u0436\u0434\u044b\u0439 \u0438\u043d\u043f\u0443\u0442     const validatedInputs = fieldsArray.reduce((prev: any, [name, value]: any) =&gt; ({ ...prev, [name]: fieldValidation(value, { touched: true }) }), {});     \/\/ \u0418\u0437\u043c\u0435\u043d\u044f\u0435\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0441\u0442\u0435\u0439\u0442\u0430 isValid     setFormValid(getFormValidationState(validatedInputs));     setState(validatedInputs);      onSubmit({ values });   }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0443 \u043d\u0430\u0441 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0433\u043e\u0442\u043e\u0432 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0439 \u0445\u0443\u043a \u0434\u043b\u044f \u043f\u0440\u043e\u0441\u0442\u044b\u0445 \u0444\u043e\u0440\u043c \u0441 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c\u044e \u0432\u0430\u043b\u0438\u0434\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0432\u0432\u043e\u0434 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f. \u041f\u043e\u0441\u043b\u0435 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043c\u0430\u043d\u0438\u043f\u0443\u043b\u044f\u0446\u0438\u0439 \u043d\u0430 \u0432\u044b\u0445\u043e\u0434\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u0442\u0430\u043a\u043e\u0439 \u043a\u043e\u0434:<\/p>\n<p>  <\/p>\n<div class=\"spoiler\" role=\"button\" tabindex=\"0\">                         <b class=\"spoiler_title\">useForm.ts<\/b>                         <\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"javascript\">import { ChangeEvent, FormEvent, useState } from 'react';  type IValidatorFN = (s: string) =&gt; {};  export interface IField {   value?: string;   type?: string;   label?: string;   error?: string;   isValid?: boolean;   required?: boolean;   touched?: boolean;   setState?: (event: ChangeEvent&lt;HTMLInputElement&gt;) =&gt; {};   validators?: IValidatorFN[]; }  export type ICustomField&lt;T = {}&gt; = IField &amp; T;  export type ICustomObject&lt;T = {}&gt; = {   [key: string]: ICustomField &amp; T; }  export type IValues = {   [key: string]: string | number; }  export type IForm = {   fields: ICustomObject;   isValid: boolean;   handleSubmit: (onSubmit: Function) =&gt; (e: FormEvent) =&gt; void; }  type IOptions = {   [key: string]: any; }  export const useForm = (initialFields: ICustomObject): IForm =&gt; {   const form = Object.entries(initialFields).reduce((fields, [name, value]: any[]) =&gt; {     const isString = typeof value === 'string';      const field = {       [name]: {         type: 'text',         value: (isString &amp;&amp; value) || ((!isString &amp;&amp; value.value) || ''),         error: (!isString &amp;&amp; value.error) || null,         validators: (!isString &amp;&amp; value.validators) || null,         isValid: (!isString &amp;&amp; value.isValid) || true,         required: (!isString &amp;&amp; value.required) || false,         touched: false,         setState: (value: ChangeEvent&lt;HTMLInputElement&gt;) =&gt; handleInput(value, name),         ...(!isString &amp;&amp; value),       },     };      return {...fields, ...field};   }, {});    const [fields, setState] = useState&lt;ICustomObject&gt;(form);   const [isValid, setFormValid] = useState&lt;boolean&gt;(true);    const getFormValidationState = (fields: ICustomObject): boolean =&gt;     Object.entries(fields).reduce((isValid: boolean, [_, value]: any) =&gt; Boolean(Number(isValid) * Number(value.isValid)), true);    const fieldValidation = (field: ICustomField, options: IOptions = {}) =&gt; {     const { value, required, validators } = field;      let isValid = true, error;      if (required) {       isValid = !!value;       error = isValid ? '' : 'field is required';     }      if (validators &amp;&amp; Array.isArray(validators)) {       const results = validators.map(validateFn =&gt; {         if (typeof validateFn === 'string') return validateFn;          const validationResult = validateFn(value || '');          return typeof validationResult === 'string' ? validationResult : '';       }).filter(message =&gt; message !== '');        if (results.length) {         isValid = false;         error = results[0];       }     }      return { ...field, isValid, error, ...options };   };    const handleInput = (element: ChangeEvent&lt;HTMLInputElement&gt;, name: string) =&gt; {     const input = fields[name];     const value = element.target.value;      const field = {       ...input,       value,       touched: true,       isValid: true,     };      const validatedField = fieldValidation(field);      setState((prevState: ICustomObject) =&gt; {       const items = {...prevState, [name]: validatedField};        setFormValid(getFormValidationState(items));       return items;     });   }    const handleSubmit = (onSubmit: Function) =&gt; (e: FormEvent) =&gt; {     if (e &amp;&amp; e.preventDefault) {       e.preventDefault();     }      const fieldsArray = Object.entries(fields);     const values = fieldsArray.reduce(((prev: ICustomObject, [name, { value }]: any) =&gt; ({ ...prev, [name]: value })), {});     const validatedInputs = fieldsArray.reduce((prev: ICustomObject, [name, value]: any) =&gt; ({ ...prev, [name]: fieldValidation(value, { touched: true }) }), {});      setFormValid(getFormValidationState(validatedInputs));     setState(validatedInputs);      onSubmit({ values });   }    return {     fields,     isValid,     handleSubmit,   } }<\/code><\/pre>\n<\/div><\/div>\n<p>  <\/p>\n<div class=\"spoiler\" role=\"button\" tabindex=\"0\">                         <b class=\"spoiler_title\">App.tsx<\/b>                         <\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"javascript\">import React from 'react'; import { useForm, IValues } from '.\/hooks\/useForm';  const formInputs = {   firstName: {     required: true,     validators: [       (s: string) =&gt; !s.length &amp;&amp; '\u041f\u043e\u043b\u0435 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0434\u043b\u044f \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f',       (s: string) =&gt; s.length &lt; 2 &amp;&amp; '\u041c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u0430\u044f \u0434\u043b\u0438\u043d\u0430 \u0441\u0442\u0440\u043e\u043a\u0438 2',       (s: string) =&gt; s.length &lt;= 2 &amp;&amp; '\u0410 \u0442\u0435\u043f\u0435\u0440\u044c 3',       (s: string) =&gt; parseInt(s) &lt; 2 &amp;&amp; '\u0414\u043e\u043b\u0436\u043d\u0430 \u0431\u044b\u0442\u044c \u0446\u0438\u0444\u0440\u0430, \u0431\u043e\u043b\u044c\u0448\u0435 1',     ],     label: 'First Name',   },   datetime: {     type: 'date',     label: 'Birth Date',     validators: [       (s: string) =&gt; new Date(s).getUTCFullYear() &gt; new Date().getUTCFullYear() &amp;&amp; '\u0413\u043e\u0434 \u0440\u043e\u0436\u0434\u0435\u043d\u0438\u044f \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0435 \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e',     ],   },   lastName: {     label: 'Last Name',   }, }  const App = () =&gt; {   const { fields, isValid, handleSubmit } = useForm(formInputs);   const { firstName, datetime, lastName } = fields;    const onSubmit = ({ values }: { values: IValues }) =&gt; {     console.log(values, 'submit');   }    const formFields = [firstName, lastName, datetime];    return (     &lt;div className=&quot;App&quot;&gt;       &lt;form onSubmit={handleSubmit(onSubmit)}&gt;         {formFields.map((field, index) =&gt; (           &lt;div key={index}&gt;             &lt;input               type={field.type}               placeholder={field.label}               value={field.value}               onChange={field.setState}             \/&gt;             &lt;span&gt;{field.touched &amp;&amp; field.error}&lt;\/span&gt;           &lt;\/div&gt;         ))}         &lt;div&gt;           &lt;button disabled={!isValid}&gt;Send form&lt;\/button&gt;         &lt;\/div&gt;       &lt;\/form&gt;     &lt;\/div&gt;   ); }  export default App;<\/code><\/pre>\n<\/div><\/div>\n<p>  <\/p>\n<h2 id=\"itog\">\u0418\u0442\u043e\u0433<\/h2>\n<p>  <\/p>\n<p>\u0412 \u0434\u0430\u043d\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043c\u043d\u0435 \u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u043f\u0440\u0438\u0432\u0435\u0441\u0442\u0438 \u043f\u0440\u0438\u043c\u0435\u0440 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0433\u043e \u0445\u0443\u043a\u0430 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0444\u043e\u0440\u043c\u0430\u043c\u0438. \u041d\u0435\u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u043d\u0438\u043c\u0438 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f\u043c\u0438 \u0438\u043b\u0438 \u0440\u0435\u0430\u043a\u0442-\u0445\u0443\u043a\u0430\u043c\u0438. \u041a\u0430\u043a \u044f \u0443\u043f\u043e\u043c\u0438\u043d\u0430\u043b \u0432\u044b\u0448\u0435, \u0435\u0441\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0438 \u0441\u043f\u043e\u0441\u043e\u0431\u044b \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u0430. \u041e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0432 \u044d\u0442\u043e\u043c \u043a\u043e\u0434\u0435 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043e\u043d \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u0440\u0435\u043d\u0434\u0435\u0440 \u0432\u0441\u0435\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043f\u0440\u0438 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0438 \u0441 \u043f\u043e\u043b\u044f\u043c\u0438. \u041e\u0442 \u044d\u0442\u043e\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0438\u0437\u0431\u0430\u0432\u0438\u0442\u044c\u0441\u044f, \u0435\u0441\u043b\u0438 \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u0431\u0435\u0437 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043f\u043e\u043b\u0435\u0439. \u041e\u0434\u043d\u0430\u043a\u043e \u043d\u0435 \u0432\u0441\u0435\u0433\u0434\u0430 \u043d\u0435\u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c\u044b\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u0434\u043b\u044f \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0442\u043e\u0439 \u0438\u043b\u0438 \u0438\u043d\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0438. \u041d\u0430 \u043f\u043e\u043c\u043e\u0449\u044c \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u0439\u0442\u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 rxjs \u0438\u043b\u0438 \u0434\u0440\u0443\u0433\u0438\u0435, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0449\u0438\u0435 \u0435\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a <a href=\"https:\/\/github.com\/grammarly\/focal\" rel=\"nofollow\">focal<\/a> \u0438\u043b\u0438 <a href=\"https:\/\/github.com\/roborox\/rixio\" rel=\"nofollow\">rixio<\/a>. \u041d\u043e \u044d\u0442\u043e \u0442\u0435\u043c\u0430 \u0434\u043b\u044f \u0434\u0440\u0443\u0433\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438.<br \/>  \u0421\u043f\u0430\u0441\u0438\u0431\u043e, \u0447\u0442\u043e \u0434\u043e\u0447\u0438\u0442\u0430\u043b\u0438 \u0434\u043e \u043a\u043e\u043d\u0446\u0430. \u042f \u043d\u0430\u0434\u0435\u044e\u0441\u044c, \u0447\u0442\u043e \u043f\u043e\u0441\u043b\u0435 \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u043b\u0435\u043d\u0438\u044f \u0441 \u044d\u0442\u0438\u043c\u0438 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u043c\u0438 \u0443 \u0432\u0430\u0441 \u0443\u043b\u0443\u0447\u0448\u0438\u043b\u043e\u0441\u044c \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u0442\u0435\u043c\u044b \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0445 \u0445\u0443\u043a\u043e\u0432, \u0432 \u0447\u0430\u0441\u0442\u043d\u043e\u0441\u0442\u0438, \u0440\u0430\u0431\u043e\u0442\u0430 \u0441 \u0444\u043e\u0440\u043c\u0430\u043c\u0438.<br \/>  \u041f\u0440\u043e\u0435\u043a\u0442 \u043d\u0430 <a href=\"https:\/\/github.com\/Fedorrychkov\/react-custom-forms-article\" rel=\"nofollow\">github<\/a><\/p>\n<\/div>\n<p> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/post\/523256\/\"> https:\/\/habr.com\/ru\/post\/523256\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"\n<div class=\"post__text post__text-html post__text_v1\" id=\"post-content-body\">\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/ag\/yc\/sg\/agycsg6n0d0i9q-ionmuik_bgcw.jpeg\"><\/p>\n<p>  <\/p>\n<p>\u0412 \u044d\u0442\u043e\u043c \u043f\u043e\u0441\u0442\u0435 \u0431\u0443\u0434\u0435\u0442 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u0445\u0443\u043a \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f\u043c\u0438 \u0444\u043e\u0440\u043c\u044b \u0438 \u0431\u0443\u0434\u0443\u0442 \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u043d\u044b \u0441\u043f\u043e\u0441\u043e\u0431\u044b \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u043e\u0431\u044a\u0435\u043a\u0442\u0430\u043c\u0438 \u0438 \u043c\u0430\u0441\u0441\u0438\u0432\u0430\u043c\u0438. \u0412 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u0435 \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044e \u0444\u043e\u0440\u043c \u0438 \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438. <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-316037","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/316037","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=316037"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/316037\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=316037"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=316037"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=316037"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}