جافاسكريبت - React الخاصية غير المعروفة 'onSearch'

أحاول استخدام حدث onSearch على حقل البحث هكذا:

render(){
  return(

  <input type="search" onSearch={ () => console.warn('search') }  />
  );
}

لكني أحصل على خطأ الخاصية غير المعروفة، هل لديك أي أفكار حول كيفية إصلاحه؟

أريد إنشاء حقل إدخال تكملة تلقائية يقوم بإطلاق حدث عندما ينقر المستخدم على أيقونة "البحث" في لوحة المفاتيح.

تعديل:

onSearch ليس سمة قياسية، لذا أعتقد أن React لن يدعمها. بما أن onSearch يشبه الضغط على مفتاح Enter، فإن استخدام onKeypress سيؤدي الغرض:

render() {
  return (
    <main>
      <input onKeyPress={ this.onKeyPress } type="search" list="options"/>
      <datalist id="options">
        { OPTS.map(item => <option value={ item.nm } key={ item.id } data-id={ item.id } />) }
      </datalist>
    </main>
    );
  }


onKeyPress(event) {
  if (event.key === 'Enter') {
    const id = document.querySelector(`#options   option[value="${event.target.value}"]`).dataset.id;
    if (id) {
      console.warn('user search', id);
    }
  }
}

الإجابة رقم 1

search هو بالتأكيد حدث من نوع input في DOM، لكن React لا يدعمه بعد. لذا يمكنك الاستماع إلى أحداث عناصر DOM الخام.

افعل هكذا

<Input
  ref={element=>(element||{}).onsearch=this.searchHandler}
/>

هذا يمكن أن ينجح، قد ترغب في معرفة السبب.

أولاً، سمة ref تقبل دالة كقيمة، والتي سيتم تنفيذها مع عنصر DOM حقيقي (بعكس DOM الافتراضي).

وقبل أن يتم تركيب الـ DOM الفعلي في المستند، سيتم تنفيذ الدالة أيضًا، ولكن ليس هناك عنصر يمكننا ربط حدث به، لذا نستخدم (element||{}) لتجنب الأخطاء.

بدلاً من استخدام addEventListener، نستخدم طريقة ele.onsearch، لأن المكون سيعيد الرندر عند تحديث props أو state، في كل مرة يتم فيها استدعاء دالة الرندر سنقوم بإرفاق حدث لعنصر DOM وعندما يتم إطلاق حدث search يمكن تشغيل دالة المعالج عدة مرات.

الإجابة رقم 2

أعتقد أنك تبحث عن onChange. سيؤدي الإدخال إلى إطلاق حدث تغيير عندما تقوم بتحرير البيانات بداخله.

تعديل: onSearch غير مدعوم بواسطة مستندات React يمكنك استخدام حدث keypress أو حدث keyup للقيام بنفس الشيء. فقط تحقق من رمز المفتاح وانظر إذا كان Enter (13)

handleKeyPress = (e) => {
    if(e.keyCode === 13) {
        console.warn('search');
    }
}

<input type="search" onKeyPress={this.handleKeyPress} />