ترکیب React و Typescript: دریافت داده‌های کاربر

Combining React and Typescript: Receiving User Data

حالا که اولین کامپوننت خود را در جلسه قبل تکمیل کرده ایم نوبت به نوشتن یک کامپوننت جدید برای دریافت داده های کاربر می رسد. به پوشه components رفته و فایل جدیدی به نام NewTodo.tsx ایجاد کنید. در ابتدا باید react را وارد این فایل کنیم و قالب اولیه کدهایمان را می نویسیم:

import React from 'react';

const NewTodo: React.FC = () => {};

export default NewTodo;

حالا باید این کامپوننت جدید را وارد کامپوننت App.tsx کنیم بنابراین این فایل را باز کرده و می گوییم:

import React from 'react';

import TodoList from './components/TodoList';
import NewTodo from './components/NewTodo';

اگر یادتان باشد در جلسه قبل کامنتی را در این فایل نوشته بودم:

      {/* A component that adds todos */}

به جای این کامنت باید از کامپوننت جدیدمان استفاده کنیم:

const App: React.FC = () => {
  const todos = [{ id: 't1', text: 'Finish the course' }];
  return (
    <div className="App">
      <NewTodo />
      <TodoList items={todos} />
    </div>
  );
};

هر برنامه Todo ای (کار هایی که کاربر باید در یک روز انجام بدهد – مثلا رفتن به خرید، شستن ماشین و الی آخر) باید فرمی داشته باشد که کاربر توسط آن کار های خود را درون برنامه ثبت کند بنابراین در همان ابتدا یک فرم ساده را در فایل NewTodo.tsx تعریف می کنیم:

import React from 'react';

const NewTodo: React.FC = () => {
    return (
      <form>
        <div>
          <label htmlFor="todo-text">Todo Text</label>
          <input type="text" id="todo-text" />
        </div>
        <button type="submit">ADD TODO</button>
      </form>
    );
  };
  
  export default NewTodo;

فرم بالا به جز HTML هیچ کد دیگری ندارد. اگر با نحوه نوشتن فرم ها در React آشنایی ندارید به دوره آموزش کامل ری اکت ما سری بزنید. خصوصیاتی مانند htmlFor معادل For عادی در HTML هستند. برای ادامه کدنویسی باید چند مرحله اصلی را پیاده سازی کنیم. در ابتدا باید هر چیزی که کاربر در input ما تایپ کرده است را دریافت کنیم و در مرحله بعد باید تمام این موارد را به کامپوننت App.tsx ارسال کنیم (مدیریت todo ها درون app.tsx خواهد بود).

بنابراین در قدم اول باید تابعی برای دریافت داده های کاربر بنویسیم:

const NewTodo: React.FC = () => {
    const todoSubmitHandler = (event: React.FormEvent) => {
        event.preventDefault();
    };

    return (
        <form onSubmit={todoSubmitHandler}>
            <div>
                <label htmlFor="todo-text">Todo Text</label>
                <input type="text" id="todo-text" />
            </div>
            <button type="submit">ADD TODO</button>
        </form>
    );
};

همانطور که می بینید در ابتدا تابعی به نام todoSubmitHandler را نوشته ام که مسئول ثبت فرم است. در این فرم event را دریافت خواهیم کرد (مثل جاوا اسکریپت عادی) و تایپ آن در تایپ اسکریپت برابر React.FormEvent خواهد بود. در همان ابتدا فرم را preventDefault می کنم چرا که نمی خواهم صفحه رفرش بشود (رفتار پیش فرض فرم ها، ارسال داده ها به سمت سرور و رفرش کردن صفحه است). ما باید تابع todoSubmitHandler را کامل کنیم اما سوالی پیش می آید. برای دریافت داده های کاربر باید چه کار کنیم؟

ما دو راه کلی برای دریافت داده های کاربر داریم:

مدیریت state برای input در همین فایل (با two-way-binding)
استفاده از ref ها

من از ref ها استفاده می کنم چرا که مدیریت State را بعدا خواهیم دید. برای استفاده از ref ها (که نوعی react hook هستند) باید آن ها را وارد فایل کنیم، بنابراین دستور import را به شکل زیر ویرایش کنید:

import React, { useRef } from 'react';

حالا می توانیم از ref استفاده کنیم:

const NewTodo: React.FC = () => {
    const textInputRef = useRef();

    const todoSubmitHandler = (event: React.FormEvent) => {
        event.preventDefault();
    };
// بقیه کدها //

زمانی که ref را به شکل بالا صدا می زنیم، می توانیم آن را درون متغیری ذخیره کنیم. این ref (مخفف reference به معنی «ارجاع») به یکی از عناصر HTML ما (یا بهتر بگویم JSX ما) متصل می شوند و به ما اجازه می دهد با آن عنصر تعامل داشته باشیم. قطعا در این پروژه باید Ref را به عنصر input متصل کنم بنابراین:

    return (
        <form onSubmit={todoSubmitHandler}>
            <div>
                <label htmlFor="todo-text">Todo Text</label>
                <input type="text" id="todo-text" ref={textInputRef} />
            </div>
            <button type="submit">ADD TODO</button>
        </form>
    );

با انجام این کار input را به شیء textInputRef متصل می کنیم اما به محض نوشتن کد بالا خطا دریافت خواهیم کرد. چرا؟ به دلیل اینکه تایپ اسکریپت از ما می خواهد دقیق باشیم و وضعیت شیء textInputRef فعلا دقیق نیست. برای پیروی از دستورات تایپ اسکریپت، تایپ مورد نظر این شیء را هم در همان بالا مشخص می کنیم:

const NewTodo: React.FC = () => {
    const textInputRef = useRef<HTMLInputElement>(null);

    const todoSubmitHandler = (event: React.FormEvent) => {
        event.preventDefault();
    };
// بقیه کدها //

از آنجایی که ref ما به یک عنصر input متصل شده است و تایپ آن نیز generic type است، می توانیم به شکل بالا HTMLInputElement را به آن پاس بدهیم. همچنین useRef به مقدار اولیه نیاز دارد که من آن را null داده ام. چرا؟ به دلیل اینکه در اولین باری که کدهای ما اجرا شده و برنامه رندر می شود، عنصر input ما هنوز وجود ندارد (بین ایجاد input و اجرا شدن useRef فاصله خواهد بود) بنابراین در ابتدا همان null را برایش می گذاریم تا مشکلی پیش نیاد. با این تفاسیر می توانیم تابع todoSubmitHandler را تکمیل کنیم:

  const todoSubmitHandler = (event: React.FormEvent) => {
    event.preventDefault();
    const enteredText = textInputRef.current!.value;
    console.log(enteredText);
  };

هنگامی که با ref ها کار می کنیم همیشه از باید از کلیدواژه current استفاده نماییم (برای آشنایی بیشتر به دوره React مراجعه نمایید) بنابراین textInputRef.current!.value مقدار وارد شده توسط کاربر را به ما می دهد. توجه داشته باشید که علامت تعجب (!) برای این است که به تایپ اسکریپت بگوییم نگران null بودن اولیه input ما نباشد. همچنین من مقدار تایپ شده را console.log می کنم تا آن را در کنسول مرورگر هم مشاهده کنیم.

شما می توانید کدهای بالا را در مرورگر خود اجرا کنید و با تایپ کردن هر چیزی در input و زدن دکمه ADD TODO شاهد آن در console مرورگر خواهید بود. در قسمت های بعدی سعی می کنیم که این مقدار گرفته شده از کاربر را به کامپوننت app.tsx ارسال کنیم.