Paprastas vaizdo grotuvo vadovas su React

Norite į savo Reactaplikaciją įdiegti paprastą videogrojaraštį? Tai leis jums pasirinkti vaizdo įrašus iš iš anksto nustatyto sąrašo ir leisti juos vaizdo grotuvu. Šiame tutorejums bus parodyta, kaip naudoti select elementą, kad pasirinktumėte skirtingas video URL ir jas rodyti grotuve. Pradėkime!

Pagrindinės išvados

1. select elemento naudojimas React leidžia lengvai pasirinkti video URL.
2. Bus naudojamas State, kad būtų saugoma dabartinė video URL ir ji būtų naudojama vaizdo grotuvui.
3. Renginiai, tokie kaip onChange, padeda atpažinti vartotojo pasirinkimą ir reaguoti į jį.

Žingsnis po žingsnio vadovas

Žingsnis 1: Pagrindų nustatymas

Prieš pradėdami rašyti kodą, įsitikinkite, kad esate sukūrę savo React projektą. Galite paprasčiausiai sukurti naują React programą šiam informacijai, jei dar neturite. Baigę tai, pradėkite įgyvendinti grojaraštį.

Žingsnis 2: pridėti select elementą

Pridėkite select elementą į savo programą. Šis elementas turės įvairius video pasirinkimus. Iš pradžių galite įdėti tris fiksuotas parinktis su nustatytomis video URL. Štai pavyzdys:

<select>
  <option value="URL1">Elephant Dream</option>
  <option value="URL2">Sintel</option>
  <option value="URL3">Big Buck Bunny</option>
</select>

Žingsnis 3: Sukurkite valstybės valdomą komponentą

Norėdami valdyti vaizdo pasirinkimą, naudokite React valstiją. Nustatykite pradinę valstiją kaip tuščią eilutę ir naudokite useState, kad saugotumėte dabartinę video URL.

const [currentVideo, setCurrentVideo] = useState('');

Žingsnis 4: Pridėti onChange įvykį

Norėdami reaguoti į pokyčius select elemente, pridėkite onChange įvykio apdorotoją select elementui. Šis įvykio apdorotojas iškvies funkciją, kuri atnaujina valstiją:

<select onChange={e => setCurrentVideo(e.target.value)}>
  ...
</select>

Žingsnis 5: Integruoti vaizdo grotuvą

Dabar atėjo laikas sukonfigūruoti vaizdo grotuvą, kad jis naudotų dabartinę URL iš valstijos. Sukurkite vaizdo grotuvą, kuriame perdaviate src savybę video elementui:

<video src={currentVideo} controls />

Žingsnis 6: Klaidų tvarkymas

Jei susidursite su Not a Number klaidomis, galite įdėti paprastą sąlygą, kad užtikrintumėte, jog video trukmė būtų tinkamai įkelta ir atitinkamai tvarkoma. Štai tokios patikros pavyzdys:

if (duration > 0) {
  // Logika trukmės tvarkymui
}

Žingsnis 7: Pagerinti vartotojo sąsają

Norėdami patraukliai pateikti sukurtus vaizdo įrašus, apsvarstykite galimybę pritaikyti video elemento dydį. Galite naudoti CSS:

video {
  width: 100%;
  height: auto;
}

Žingsnis 8: Dinamiškai kurti grojaraštį

Paskutinis žingsnis yra fiksuotos parinkties pakeitimas dinamišku sąrašu. Tai galite padaryti naudodami video URL masyvą savo valstijos valdymo sistemoje. Su šiuo masyvu galite dinamiškai generuoti ir tvarkyti parinktis select elemente.

const videos = ['URL1', 'URL2', 'URL3'];

Čia galite vėliau pridėti logiką, kad galėtumėte pridėti arba ištrinti URL.

Santrauka - React Tutorial: Grojaraštis su Select

Šiame pamokyne sužinojote, kaip integruoti select elementą, kad rodytumėte vaizdo įrašų sąrašą React projekte. Naudojote valstiją, kad išsaugotumėte vartotojo pasirinkimą ir teisingai valdyti vaizdo grotuvą. Taip pat nustatėte ir ištaisėte galimas klaidas bei optimizavote vartotojo sąsają, kad ji būtų patrauklesnė.