javascript - React Nepoznati svojstvo 'onSearch'

Pokušavam koristiti onSearch događaj na unosu pretraživanja ovako:

render(){
  return(

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

Ali dobivam pogrešku nepoznatog svojstva, imate li ideju kako to popraviti?

Želim stvoriti polje za automatsko dovršavanje koje aktivira događaj kada korisnik klikne na ikonu 'pretraži' na tipkovnici.

UREDI:

onSearch nije standardni atribut, pa pretpostavljam da ga React neće podržati. Budući da je onSearch isto što i pritiskanje tipke Enter, korištenje onKeypress će odraditi posao:

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);
    }
  }
}

Odgovor #1

search je apsolutno DOM događaj tipa pretraživanja input, ali React ga još ne podržava. Dakle, možete slušati događaje sirovog DOM elementa.

radi ovako

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

ovo može funkcionirati, možda ćete htjeti znati zašto.

Prvo, atribut ref prihvaća funkciju kao vrijednost, koja će se izvršiti s pravim DOM elementom (suprotno virtualnom DOM-u).

I prije nego što se stvarni DOM montira u dokument, funkcija će također biti izvršena, ali ne postoji element na koji možemo priključiti događaj, pa koristimo (element||{}) kako bismo izbjegli pogreške.

Umjesto korištenja addEventListener, koristimo način ele.onsearch, jer će se komponenta ponovno prikazati kada se props ili state ažuriraju, svaki put kada se pozove funkcija render, priložit ćemo događaj na DOM element, a kada se search događaj pokrene, funkcija rukovatelja može se izvršiti više puta.

Odgovor #2

Mislim da tražite onChange. Polje za unos će pokrenuti događaj promjene kada uredite podatke unutar njega.

UREDI: onSearch nije podržan u React dokumentaciji, možete koristiti keypress događaj ili keyup događaj da biste učinili istu stvar. Samo provjerite keycode i vidite je li to enter (13)

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

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