Textarea Dynamic Height with React

ما تحاول تحقيقه هو إنشاء textarea تبدأ كسطر واحد وتنمو حتى 4 أسطر، ثم تبدأ في التمرير إذا واصل المستخدم الكتابة. لديك حلاً جزئياً يعمل بشكل ما، حيث ينمو ويتوقف عندما يصل إلى الحد الأقصى، لكنه لا يتقلص عندما يتم حذف النص كما ترغب.

الحل الذي قدمته يعتمد على خاصية scrollHeight لتحديد ارتفاع textarea بناءً على المحتوى. ومن ثم يُحدد ارتفاع textarea الجديد بناءً على scrollHeight الجديد. ومع ذلك، فإن هذا الحل لا يتعامل بشكل صحيح مع تقليل النص.

لحل هذه المشكلة، يمكنك استخدام مزيج من خصائص CSS والتحكم في الحالة الحالية لارتفاع textarea. بدلاً من الاعتماد على scrollHeight، يمكنك استخدام clientHeight للعنصر textarea واضافة بعض الاستايلات له ليكون قابلاً للتمدد بشكل ديناميكي. ثم، يمكنك استخدام تفاعل الحدث onKeyUp لتحديث الحالة في التطبيق.

أعدت كتابة الكود بشكل يستخدم CSS ويتعامل بشكل صحيح مع إضافة وحذف النص:

javascriptCopy code
import React from 'react';
import './styles.css'; // أنشئ ملف CSS لتطبيق الأنماط الضرورية

export class Foo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      textareaValue: '',
    };
  }

  handleInputChange(evt) {
    this.setState({
      textareaValue: evt.target.value,
    });
  }

  render() {
    const { textareaValue } = this.state;
    return (
      <div>
        <textarea
          className="custom-textarea"
          value={textareaValue}
          onChange={this.handleInputChange.bind(this)}
        />
      div>
    );
  }
}

والآن، قم بإنشاء ملف CSS بالاسم styles.css وأضف الأنماط التالية:

cssCopy code
.custom-textarea {
  overflow: hidden; /* للتحكم في العرض الزائد للنص */
  resize: none; /* لمنع تغيير حجم textarea */
  height: auto; /* الارتفاع الافتراضي */
  min-height: 38px; /* الارتفاع الأدنى */
  max-height: 150px; /* الارتفاع الأقصى */
}

باستخدام هذا النهج، ينبغي أن تعمل textarea كما تريد، حيث تتوسع حتى 4 أسطر ثم تبدأ في التمرير عند الحاجة دون مشاكل في التقليل من النص.

باستخدام هذا النهج، ينبغي أن تعمل textarea كما تريد، حيث تتوسع حتى 4 أسطر ثم تبدأ في التمرير عند الحاجة دون مشاكل في التقليل من النص.

الآن، دعنا نشرح الكود والأساليب المستخدمة بشكل أكبر:

1. CSS Styles:

   • تم استخدام overflow: hidden; للتحكم في العرض الزائد للنص داخل textarea.
   • تم استخدام resize: none; لمنع المستخدم من تغيير حجم textarea بشكل يدوي.
   • تم استخدام height: auto; لتحديد ارتفاع افتراضي ينمو تلقائياً.
   • تم تعيين min-height و max-height لتحديد الحد الأدنى والأقصى لارتفاع textarea.

2. React Component:

   • تم إنشاء Foo كـ React Component، والذي يحتوي على حالة textareaValue لتخزين النص داخل textarea.
   • تم استخدام handleInputChange لتحديث حالة textareaValue عند تغيير المحتوى داخل textarea.
   • تم استخدام value لربط textarea بقيمة textareaValue داخل حالة العنصر.
   • تم استخدام onChange لتعقب تغييرات المستخدم داخل textarea وتحديث حالة العنصر بناءً على ذلك.

هذا النهج يسمح للمستخدم بكتابة النص بحرية داخل textarea، حيث يمكن للنص أن ينمو حتى 4 أسطر، وعند الحاجة يتم التمرير بشكل تلقائي. بمجرد أن يقوم المستخدم بحذف جزء من النص، ستتقلص textarea بشكل مناسب لتتناسب مع النص المتبقي.

باستخدام هذا الحل، يمكنك تحقيق السلوك المطلوب بطريقة نظيفة وفعالة دون الحاجة إلى استخدام scrollHeight أو الأساليب المعقدة الأخرى.