مشكلة 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

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية