مشكلة object object في عنصر textarea في React.js؟

Emad Saif · 15 يونيو 2022

أحاول أن أقوم بعمل صندوق لكتابة تعليق في مشروع React وقمت بكتابة الكود التالي:

import React, { useState } from "react";

export default function CommentEditor() {
  const [value, setValue] = useState('');
  return (
      <div>
        <textarea value={value} onChange={(v)=>setValue(v)}></textarea>
      </div>
  );
}

المشكلة الآن أن العنصر textarea يكون فارغ بشكل إفتراضي، ولكن عند محاولة كتابة أي شيء سظهر النص [object Object] داخل صندوق textarea، ولا يظهر أي خطأ في الـ console

ما المشكلة في هذا الكود؟ وكيف أقوم بحل المشكلة؟

Wael Aljamal · 15 يونيو 2022

في لغة جافاسكربت عند عمل render ل object أي تحويله لسلة نصية سيتم طباعة العبارة

[object Object]

الحل هو استخلاص القيمة من كائن الحدث v بالشكل

<textarea value={value} onChange={(v)=>setValue(v.target.value)}>
                                              // ^^^^^^^^^^^^^
</textarea>

في حال أردت زيادة تعقيد دالة إسناد القيمة و عمل تعديلات على القيمة و فلترتها مثلاً، يمكنك فصل دالة المعالجة إلى handler منفصل، وتصبح الشيفرة أكثر قابلية للقراءة

 const handleChange = (event) => {
        setValue(event.target.value);
    };


/*       */


<textarea value={value} onChange={handleChange}>
                               // ^^^^^^^^^^^^^
</textarea>

مشكلة object object في عنصر textarea في React.js؟

السؤال

Emad Saif

رابط هذا التعليق

شارك على الشبكات الإجتماعية

1 جواب على هذا السؤال

Recommended Posts

Wael Aljamal

رابط هذا التعليق

شارك على الشبكات الإجتماعية

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية