رد فعل وتحرير النص عند النقر المزدوج

كيفية تعديل جزء من الصفحة عند النقر المزدوج عليها باستخدام React

كنت بحاجة إلى الاستماع إلى حدث نقر مزدوج على عنصر ، وجعل هذا العنصر قابلاً للتعديل.

طريقة واحدة للقيام بذلك هي استخدامtoggleمتغير الحالة ، وعندما يتم النقر على العنصر مرتين ، نظهر عنصرًا مختلفًا:

const [toggle, setToggle] = useState(true)
const [name, setName] = useState('test')

toggle ? ( <p onDoubleClick={() => { setToggle(false) }} >{name}</p> ) : ( <input type=‘text’ value={project.status} /> )}

ثم أضفت بعض الدعائم إلى ملفinputجزء. أولاً ، نقوم بتعيين ملفnameدولة لvalueدعم.

ثم نستخدم ملفonChange()مستمع الحدث لتعيين قيمةnameمتغير عندما يكون هناك أي تغيير في محتوىinputحقل.

أخيرًا نستخدم ملفاتonKeyDown()لاعتراضEnterأوEscapeالحدث الصحفي الرئيسي والعودة إلى عرضpجزء:

<input
  type="text"
  value={name}
  onChange={(event) => {
    setName(name)
  }}
  onKeyDown={(event) => {
    if (event.key === 'Enter' || event.key === 'Escape') {
      setToggle(true)
      event.preventDefault()
      event.stopPropagation()
    }
  }}
/>

يمكنك أيضًا إضافة أي تأثير جانبي إلى هذه الوظيفة ، على سبيل المثال لحفظ القيمة في مكان ما إذا كان عليك ذلك.

تحميل مجانيكتيب رد الفعل


المزيد من البرامج التعليمية للتفاعل: