fix: use state instead of refs

2 files changed, 14 insertions, 7 deletions

diff --git a/src/components/Input.tsx b/src/components/Input.tsx
index 298d14c..a8a6f31 100644
--- a/src/components/Input.tsx
+++ b/src/components/Input.tsx
@@ -3,19 +3,17 @@ import { Field } from 'formik';
 
 export interface Props extends React.InputHTMLAttributes<HTMLInputElement> {
   label?: string;
-  ref?: React.Ref<HTMLInputElement>
 }
 
 const focusStyles = 'focus:outline-none focus:shadow focus:border-gray-400';
 const baseStyles = 'p-2 border bg-white border-gray-300 rounded-sm';
 
-const InputBase: React.FC<Props> = ({ label, ref, ...props }) => {
+const InputBase: React.FC<Props> = ({ label, ...props }) => {
   return (
     <div className="m-2 mb-4 flex flex-col">
       <label htmlFor={props?.name} className="mb-1 text-sm text-gray-600">{label}</label>
       <input
         id={props?.name}
-        ref={ref}
         placeholder={label}
         className={`${baseStyles} ${focusStyles}`}
         {...props}
diff --git a/src/services/transfers/TransfersUpload.tsx b/src/services/transfers/TransfersUpload.tsx
index 56bcd7e..3a867aa 100644
--- a/src/services/transfers/TransfersUpload.tsx
+++ b/src/services/transfers/TransfersUpload.tsx
@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import React, { useState } from 'react';
 import { useHistory } from 'react-router-dom';
 import { Form, Formik } from 'formik';
 import Input from '../../components/Input';
@@ -8,11 +8,14 @@ import { post } from '../../requests';
 
 const TransfersUpload: React.FC = () => {
   const history = useHistory();
-  const inputRef = useRef<HTMLInputElement>(null);
+  const [file, setFile] = useState<File>();
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setFile(event.target?.files?.[0]);
+  };
 
   const handleSubmitFile = () => {
     const reader = new FileReader();
-    const file = inputRef?.current?.files?.[0];
     if (file) {
       reader.readAsDataURL(file);
       reader.onload = (event: ProgressEvent<FileReader>) => {
@@ -34,7 +37,13 @@ const TransfersUpload: React.FC = () => {
     >
       <Formik onSubmit={handleSubmitFile} initialValues={{}}>
         <Form id="form">
-          <Input name="file" type="file" accept=".pdf" label="Прикрепите файл" ref={inputRef} />
+          <Input
+            name="file"
+            type="file"
+            accept=".pdf"
+            label="Прикрепите файл"
+            onChange={handleChange}
+          />
         </Form>
       </Formik>
     </Page>