ایجاد پست های قابل انتخاب

تا اینجای کار با ملزومات کار با Axios آشنا شدیم. نکته ی مهمی که در جلسه ی قبل گفتیم و می خواهم دوباره یادآوری کنم این است که Axios هیچ ربطی به React ندارد و به طور خاص برای آن طراحی نشده است. شما می توانید از Axios در هر پروژه ی جاوا اسکریپتی استفاده کنید.

نصب Axios از طریق npm:

$ npm install axios

نصب Axios از طریق bower:

$ bower install axios

نصب Axios از طریق Yarn:

$ yarn add axios

و همانطور که گفتم می توانید کتابخانه را به صورت جداگانه دانلود کرده و درون پروژه ی خود قرار دهید:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

به سادگی می توانید به آدرس https://unpkg.com/axios@0.19.0/dist/axios.min.js بروید و تمام سورس کد پروژه را مشاهده نمایید (سورس کد minify شده است اما در صورت نیاز می توانید با استفاده از ابزارهایی مانند https://unminify.com/ آن را از حالت minify خارج کنید). برای اطلاعات بیشتر به آدرس https://github.com/axios/axios مراجعه نمایید.

اما برسیم به اصل مطلب... در این قسمت می خواهیم کاری کنیم که با کلیک روی عنوان پست ها (در جلسه ی قبل آن ها را بارگذاری کردیم)، آن ها را در قسمت پایینی مخصوص پست ها نمایش دهیم. قسمت «عنوان» پست ها اولین کامپوننت در صفحه ی ما است:

و قسمت fullpost یا متن کامل پست نیز این قسمت است:

فعلا فقط توانسته ایم که با استفاده از متد get در Axios درخواست خود را به سرور تمرینی ارسال کرده و داده هایی را دریافت کنیم اما هنوز فقط عنوان پست ها را نمایش می دهیم و متن آن ها در پروژه ی ما موجود نیست. برای انجام این کار در ابتدا باید به Post.js برویم و به عنصر article یک onClick اضافه کنیم:

const post = (props) => (
    <article className="Post" onClick={props.clicked}>
        <h1>{props.title}</h1>
        <div className="Info">
            <div className="Author">{props.author}</div>
        </div>
    </article>
);

در واقع اینجا انتظار داریم که یک prop به نام clicked را دریافت کنیم. قرار است این prop یک ارجاع به متدی باشد که با کلیک ما اجرا شود. بنابراین به فایل Blog.js می رویم تا این متد را تعریف کنیم:

    postSelectedHandler = (id) => {
        
    }

قرار است این متد یک پارامتر به نام id بگیرد که id همان پستی است که روی آن کلیک می شود. اگر یادتان باشد برای پاس دادن آن باید بدین شکل عمل می کردیم:

        const posts = this.state.posts.map(post => {
            return <Post
                key={post.id}
                title={post.title}
                author={post.author}
                clicked={() => this.postSelectedHandler(post.id)}
            />
        });

بدین صورت id را به تابع خودمان پاس داده ایم. حالا باید این آیدی را به عنصر <FullPost> نیز پاس بدهیم:

        return (
            <div>
                <section className="Posts">
                    {posts}
                </section>
                <section>
                    <FullPost id={this.state.selectedPostId}/>
                </section>
                <section>
                    <NewPost />
                </section>
            </div>
        );

در واقع ما FullPost را روی خصوصیتی در state تنظیم کرده ایم تا اگر این خصوصیت در state تغییر کرد، FullPost نیز سریعا بروزرسانی شود و مقدار را نمایش دهد. ما هنوز چنین خصوصیتی در state نداریم بنابراین آن را تعریف می کنیم:

    state = {
        posts: [],
        selectedPostId: null
    }

حالا متد postSelectedHandler را تکمیل می کنیم:

    postSelectedHandler = (id) => {
        this.setState({ selectedPostId: id });
    }

یعنی همان آیدی را که به عنوان پارامتر دریافت می کنیم (آیدی پستی که روی آن کلیک کرده ایم) را در state قرار می دهیم. از طرفی FullPost هم در حال نظارت روی selectedPostId است و با تغییر آن سریعا تغییر خواهد کرد. البته هنوز FullPost را تنظیم نکرده ایم بنابراین به FullPost.js بروید و نگاهی به کد های JSX آن بیندازید:

    render () {
        let post = <p>Please select a Post!</p>;
        post = (
            <div className="FullPost">
                <h1>Title</h1>
                <p>Content</p>
                <div className="Edit">
                    <button className="Delete">Delete</button>
                </div>
            </div>

        );
        return post;
    }

در واقع این کد دو قسمت دارد؛ یک let به نام post که می گوید please select a post (یعنی لطفا یکی از پست ها را انتخاب کنید) و دیگری همان post را تغییر داده و محتوای ساده ای را به جایش نمایش می دهد. ما می خواهیم حالت پیش فرض همان حالت اول باشد تا به کاربر بگوید لطفا یک پست را انتخاب کن و سپس در صورتی که انتخاب کرد قسمت دوم اتفاق بیفتد. من ابتدا دوست دارم پاراگراف please select a post را در وسط قرار دهم بنابراین استایل ساده ای به آن می دهم:

let post = <p style={{ textAlign: 'center' }}>Please select a Post!</p>;

حالا برای قسمت دوم از یک شرط if استفاده می کنیم:

     render() {
        let post = <p style={{ textAlign: 'center' }}>Please select a Post!</p>;

        if (this.props.id) {
            post = (
                <div className="FullPost">
                    <h1>Title</h1>
                    <p>Content</p>
                    <div className="Edit">
                        <button className="Delete">Delete</button>
                    </div>
                </div>

            );
        }

        return post;
    }

در واقع گفته ایم اگر this.props.id وجود داشت (در حالت پیش فرض درون state به آن null داده بودیم که معادل false است) مقدار post را تغییر بده. زمانی که کاربر روی پستی کلیک کند مقدار id تغییر می کند بنابراین مقدار تغییر کرده نمایش داده می شود.

هشدار: حواستان باشد که اگر id عنصر شما صفر باشد این مقدار false تلقی می شود! تمام id های سرور تمرینی ما از عدد 1 شروع می شوند و در این زمینه مشکلی نیست.

حالا اگر فایل ها را ذخیره کرده و به مرورگر بروید می بینید که قبل از کلیک کردن روی پست ها چنین چیزی را می بینیم:

اما بعد از کلیک روی پستی خاص، محتوا نمایش داده می شود:

البته فعلا محتوای پیش فرض و JSX ساده ی آن نمایش داده می شود چرا که هنوز خود محتوای پست ها را از سرور تمرینی دریافت نکرده ایم. در قسمت بعد با استفاده از Axios محتوای پست ها را دریافت کرده و در قسمت مناسب نمایش خواهیم داد.

دیدگاه‌های شما (1 دیدگاه)

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

پریسا

20 مرداد 1401

سلام. چطور میشه آدرس https://unpkg.com را از قالب حذف کرد؟ من نتونستم کدهای اینو توی سایتم پیداش کنم و حذفشون کنم. میشه راهنمایی بفرمایید؟ ممنون. بعضی وقتا این آدرس باعث میشه سایتم کند بالا بیاد اگه میشه کمکم کنید اینو حذفش کنم.