Zpracování událostí – React

Dnes je pro vás trenér HTML a CSS k dispozici zdarma.

Když uživatel potřebuje něco zadat nebo vybrat na stránce, pravděpodobně použijete . Značka se konfiguruje pomocí atributu type.

text a heslo. Toto jsou pravděpodobně nejpoužívanější typy vstupních polí. Jedná se o jednoduchá textová pole. heslo se liší v tom, že skrývá zadané znaky.

rádio a zaškrtávací políčko. Pomocí rádia uživatelé vyberou jednu možnost z několika a pomocí zaškrtávacího políčka zaškrtnou, může to být jedna volba nebo více možností. Je velmi důležité, aby přepínače měly stejný název ( název ), aby je bylo možné seskupit.

 Кошка Собака Подписаться на новости 

odeslat – tlačítko pro odeslání formuláře. Obvykle se umísťuje na konec formuláře. I když se v praxi často používají, protože tlačítko je snadněji stylovatelné.

Pokud uživatel potřebuje stáhnout soubor, použijte soubor . Pamatujte však na zabezpečení a ověřování nahraných souborů na serveru!

Typ se používá, když chcete předat nějaká skrytá data, která by se uživateli neměla zobrazovat. Toto pole není na stránce viditelné.

číslo , datum , rozsah jsou užitečné, když potřebujete umožnit uživateli zadat číslo, datum nebo vybrat hodnotu z rozsahu. Ale buďte opatrní: prohlížeče je mohou vykreslit jinak a bez dalšího stylingu to nemusí vždy vypadat dobře.

Existují i ​​jiné typy, jako tel, email, url, ale v praxi se používají méně často. Jejich hlavní myšlenkou je poskytnout vstup pro konkrétní data.

Důležité atributy

Pomocí atributu name server přesně určí, jaká data dorazila.

zástupný symbol je užitečný pro krátké popisky. Ale to není náhrada za . Vždy používejte titulky pro vstupní pole!

Pokud je pole povinné, přidejte požadovaný atribut.

Atribut value nastavuje počáteční hodnotu pole.

Užitečné odkazy

Doctype je časopis o frontendu. Čtěte, poslouchejte a učte se s námi.

Přečtěte si více

štěrbina

Element se používá uvnitř webových komponent a slouží k zobrazení externího obsahu předávaného komponentě. Tomu se říká „projekce obsahu“ – umožňuje vkládat elementy do předdefinovaných oblastí uvnitř Shadow DOM.

se připojuje k Baseline od 15. ledna 2020.

Příklad použití

 
Иван Иванов
 
Фронтенд-разработчик
  

Jak to funguje?

1. Komponenta user-card vytvoří stínový DOM a přidá do něj element.
2. Externí prvky vnořené v tagu uživatelské karty jsou automaticky vloženy do slotů:
   • spadá do
   • jde do nepojmenovaného slotu
3. Pokud je slot prázdný, zobrazí se jeho výchozí obsah.

Atributy

název — název slotu. Používá se k propojení s prvky, které mají atribut slot=» . » .

Vlastnosti a metody v JS

• HTMLSlotElement.assignedNodes() – vrací seznam uzlů vložených do slotu.

const slot = shadowRoot.querySelector('slot[name="name"]'); const nodes = slot.assignedNodes(); 

Styling obsahu

Slot nelze stylovat přímo, ale jeho obsah lze stylovat pomocí pseudoelementu ::slotted():

::štěrbinový(h2)

⚠️ Pseudoelement ::slotted() funguje pouze s bezprostředními potomky předanými do slotu.

Vlastnosti

• Slot bez atributu name je nepojmenovaný slot, všechny prvky bez slot=» se tam dostanou. » .
• Komponenta může obsahovat pouze jeden nepojmenovaný slot.
• Obsah slotů zůstává v Light DOMu – přístupný externím skriptům a stylům, ale nikoli stylům ze Shadow DOMu (s výjimkou ::slotted).

Kdy použít

Pro vytváření flexibilních komponent: karet, modálních oken, rozbalovacích seznamů, záložek a dalších prvků uživatelského rozhraní, kde je důležité přizpůsobení obsahu.

Podpora prohlížeče

Všechny moderní prohlížeče podporují Shadow DOM v1 jako součást specifikace.

Celkem

• používá se pouze uvnitř Shadow DOMu.
• Umožňuje promítat externí HTML kód dovnitř komponenty.
• Podporuje pojmenované i nepojmenované oblasti.
• Funguje ve spojení se slot=». » pro předávané prvky.

Toto je jeden z klíčových prvků při vytváření webových komponent v čistém JavaScriptu.

podrobnosti – rozevírací seznam

Dnes je pro vás trenér HTML a CSS k dispozici zdarma.

V moderním webdesignu hraje klíčovou roli nejen vizuální přitažlivost, ale také použitelnost. Jedním z nástrojů, který výrazně zlepšuje uživatelský dojem na webových stránkách, jsou značky a . Tyto prvky HTML vám umožňují vytvářet rozevírací seznamy, díky čemuž je váš obsah strukturovanější a snáze čitelný.

Co je a?

Značka je prvek, který je ve výchozím nastavení v uzavřeném stavu a po interakci se rozšíří a na požádání uživateli poskytne další informace.

Na druhé straně slouží jako nadpis pro obsah skrytý uvnitř a zobrazuje se bez ohledu na stav (otevřeno/zavřeno) nadřazeného tagu.

Výhody použití

Používání a na webových stránkách má několik výhod:

• Vylepšená navigace: Pomáhá organizovat obsah tak, aby byl pro uživatele dostupnější a srozumitelnější.
• Šetřete místo: umožňuje kompaktně umístit velké množství informací a poskytuje k nim přístup podle potřeby.
• Zvýšená interakce: Povzbuzuje uživatele k aktivní interakci s obsahem, čímž zvyšuje celkové zapojení.

Jak používat?

Značení pomocí a je poměrně jednoduché:

 
Заголовок
 Здесь располагается скрытый контент, который будет отображен после клика по заголовку.
 

Tento kód vytvoří interaktivní prvek, který bude ve výchozím nastavení uzavřen a otevře se po kliknutí na záhlaví, čímž se odhalí obsah.

Záhlaví Zde se nachází skrytý obsah, který se zobrazí po kliknutí na záhlaví.

SEO optimalizace a dostupnost

Z hlediska SEO a přístupnosti má používání a také své výhody.

Text skrytý uvnitř je stále dostupný pro vyhledávače, což vám umožňuje zahrnout důležitá klíčová slova a fráze, aniž byste viditelnou část stránky zahltili nadbytečnými informacemi. Správné použití těchto prvků navíc pomáhá zlepšit strukturu obsahu a jeho indexování vyhledávači.

Závěr

a značky jsou výkonnými nástroji pro vytváření interaktivních webových stránek, které zlepšují uživatelskou zkušenost a optimalizaci SEO. Jejich použití vám umožní učinit obsah přístupnějším a zajímavějším a povzbudit uživatele k další interakci s vaším webem.

Využitím těchto prvků ve svých projektech návštěvníkům nejen usnadníte orientaci na vašem webu, ale také zlepšíte jeho pozici ve výsledcích vyhledávání díky efektivnějšímu indexování obsahu.

tělo — tělo stránky

Dnes je pro vás trenér HTML a CSS k dispozici zdarma.

Značka se používá k umístění veškerého obsahu, který je zobrazen na webové stránce.

Atributy značek :

• onbeforeunload je skript, který se spustí, když se uživatel chystá opustit stránku.
• onhashchange je skript, který se spustí při změně adresy URL.
• onmessage je skript, který se spustí po přijetí zprávy z aplikace.
• onoffline – skript, který se spustí, když prohlížeč začne pracovat offline.
• ononline – skript, který se spustí, když prohlížeč začne pracovat online.
• onpagehide je skript, který se spustí, když uživatel opustí stránku.
• onpageshow je skript, který se spustí, když uživatel přejde na stránku.
• onunload je skript, který se spustí, když uživatel opustí stránku.
• onafterprint je skript, který se spustí po vytištění webové stránky.
• onbeforeprint je skript, který bude spuštěn před tiskem webové stránky.
• onlanguagechange je skript, který se spustí, když se změní jazyk dokumentu.
• onmessageerror – Skript, který bude spuštěn, když dojde k chybě ve zprávě přijaté pomocí Messaging API.
• onpopstate je skript, který se spustí, když se změní stav historie prohlížeče.
• onrejectionhandled je skript, který se spustí při zpracování odmítnutého příslibu v objektu Promise.
• onstorage je skript, který se spustí, když se změní data v objektu localStorage nebo sessionStorage.
• onunhandledrejection – Skript, který bude spuštěn, když se v objektu Promise vyskytne odmítnutý slib bez zpracování.

• 13 2024 марта

b – tučný text

Dnes je pro vás trenér HTML a CSS k dispozici zdarma.

Značka se používá ke zvýraznění textu bez přidání důrazu nebo významu. V důsledku toho je obsah této značky obvykle zobrazen tučným písmem. Bez ohledu na to by tato značka neměla být používána pro styling; Pro takové úkoly je lepší použít CSS.

Сегодня мы не будем работать допоздна!
 

Dnes my ne Budeme pracovat až do pozdních hodin!

html je hlavním prvkem HTML

Dnes je pro vás trenér HTML a CSS k dispozici zdarma.

Značka je kořenový prvek webové stránky. Veškerý obsah dokumentu, včetně a , je obsažen v této značce. Značka sděluje prohlížeči, že dokument je dokument HTML.

— povinný prvek struktury HTML dokumentu.

Příklad použití

Ujistěte se, že tagu vždy předchází platný DOCTYPE ( ), který prohlížeči sděluje verzi HTML dokumentu.

Přidejte ke značce atribut lang, abyste označili jazyk obsahu, například: pro obsah v ruštině.

Související značky

Více o značce

• Webové dokumenty MDN:
• W3C: Specifikace HTML

• 1 2024 марта

div – univerzální nádoba

Značka definuje sekci nebo sekci v dokumentu HTML. Je to kontejner, který se používá k seskupování dalších prvků, jako je text, obrázky nebo jiné značky, do sekcí nebo bloků.

 
Заголовок секции
 
Какое-нибудь содержимое секции
 
 

• 6 2023 октября

figcaption – titulek pro obrázek

Dnes je pro vás trenér HTML a CSS k dispozici zdarma.

Zastaralý atribut zarovnat – zarovná popisek vzhledem k prvku.

Tag lze použít pouze uvnitř prvku.

Platný kód HTML vyžaduje, aby značka následovala za prvkem nebo jiné mediální prvky uvnitř . Toto však není povinné pravidlo a titulek lze umístit před nebo dokonce uvnitř prvku média.

meta – metadata stránky

Dnes je pro vás trenér HTML a CSS k dispozici zdarma.

Značka obsahuje metadata o dokumentu HTML. Může obsahovat informace, jako je jméno autora, název dokumentu, klíčová slova a znaková sada.

Atributy značek :

• charset — kódování znaků v dokumentu.
• jméno — název metadat.
• obsah — hodnota metadat.
• http-equiv — HTTP hlavička pro hodnotu atributu obsahu.

Atribut charset musí být prvním atributem značky a název a http-equiv nelze použít společně.

tlačítko – jen tlačítko

Dnes je pro vás trenér HTML a CSS k dispozici zdarma.

Značka vytváří klikatelné tlačítko, které může spouštět akce nebo události na webové stránce. Například odeslání nebo opětovné načtení formuláře, spuštění funkce, otevření nového okna nebo přidání položky do košíku.

Atributy značek :

• jméno — název tlačítka.
• typ — typ tlačítka, výchozí — odeslat . Atribut type je povinný, pokud je zadán atribut value.
• hodnota – hodnota, která bude odeslána na server po kliknutí na tlačítko.
• vypnuto – znamená, že tlačítko by mělo být deaktivováno.
• formulář – jeden nebo více formulářů, ke kterým tlačítko patří.
• formation – URL k souboru, který zpracuje vstup po kliknutí na tlačítko.
• formenctype – Určuje, jak mají být data formuláře zakódována při odeslání na server.
• formmethod – HTTP metoda používaná při odesílání dat formuláře.
• formnovalidate – Určuje, že data formuláře by se při odeslání na server neměla ověřovat.
• formtarget – určuje, kde se má zobrazit odpověď po odeslání formuláře.

• 4 2023 октября

článek – nezávislý obsah

Dnes je pro vás trenér HTML a CSS k dispozici zdarma.

Značka v HTML se používá ke zvýraznění obsahu, který je nezávislý a samostatný. To znamená, že takový obsah lze znovu použít na různých místech, aniž by ztratil svůj význam.

 
Заголовок статьи
 
Текст статьи.
 
 

Tag označuje články na blogu, příspěvky na fóru a další materiály, které mají význam a hodnotu, i když jsou čteny mimo kontext, ve kterém byly vytvořeny.

Nepoužívejte k seskupování položek, které nestojí samy o sobě, jako jsou seznamy produktů nebo novinky.

Zpracování událostí na elementech React je velmi podobné zpracování událostí na elementech DOM. Existuje však několik syntaktických rozdílů:

• Události v Reactu jsou pojmenovávány camelCase místo malými písmeny.
• V JSX předáváte funkci jako obslužnou rutinu události místo řetězce.

Například v HTML:

button onclick="activateLasers()"> Активировать лазеры button>

V Reactu je to trochu jiné:

button onClick=activateLasers>>  Активировать лазеры button>

Dalším rozdílem je, že v Reactu nelze zabránit výchozímu obslužnému programu události vrácením false. Musíte explicitně zavolat preventDefault. Například v běžném HTML můžete pro zrušení odeslání formuláře (výchozí akce) napsat:

form onsubmit="console.log('Отправлена форма.'); return false"> button type="submit">Отправитьbutton> form>

V Reactu by to vypadalo takto:

function Form() function handleSubmit(e) e.preventDefault(); console.log('Отправлена форма.'); > return ( form onSubmit=handleSubmit>> button type="submit">Отправитьbutton> form> ); >

Ve výše uvedeném kódu je e syntetická událost. React definuje syntetické události podle specifikace W3C, takže se nemusíte starat o kompatibilitu mezi prohlížeči. Události v Reactu nefungují úplně stejně jako nativní události. Více se o nich dozvíte v průvodci SyntheticEvent.

Při použití Reactu obvykle není nutné volat addEventListener pro přidání obslužných rutin k elementu DOM po jeho vytvoření. Místo toho se obslužná rutina přidá ihned po vykreslení elementu.

V komponentě definované pomocí třídy ES6 je obslužná rutina události obvykle jednou z metod třídy. Například tato komponenta Toggle vykreslí tlačítko, které umožňuje uživateli přepínat mezi „Zapnuto“ a „Vypnuto“:

class Toggle extends React.Component constructor(props) super(props); this.state = isToggleOn: true>; // Эта привязка обязательна для работы `this` в колбэке. this.handleClick = this.handleClick.bind(this); > handleClick() this.setState(prevState => ( isToggleOn: !prevState.isToggleOn >)); > render() return ( button onClick=this.handleClick>>  this.state.isToggleOn ? 'Включено' : 'Выключено'> button> ); > >

Při přístupu k této metodě v JSX callbackech mějte na paměti, že metody třídy v JavaScriptu nejsou ve výchozím nastavení vázány na kontext. Pokud zapomenete navázat metodu this.handleClick a předat ji metodě onClick, hodnota this bude při volání funkce nedefinovaná.

Takhle React nefunguje, je to součást fungování funkcí v JavaScriptu. Obvykle, pokud odkazujete na metodu bez znaku () za ní, například onClick= , musíte tuto metodu navázat.

Pokud se vám nelíbí bind , existují dva další způsoby. Pro správné navázání zpětných volání můžete použít syntaxi veřejného pole třídy:

class LoggingButton extends React.Component // Такой синтаксис гарантирует, что `this` привязан к handleClick. handleClick = () => console.log('значение this:', this); >; render() return ( button onClick=this.handleClick>> Нажми на меня button> ); > >

Tato syntaxe je ve výchozím nastavení k dispozici v nástroji Create React App.

Pokud nepoužíváte syntaxi polí, můžete ve zpětném volání vyzkoušet funkce se šipkami:

class LoggingButton extends React.Component handleClick() console.log('значение this:', this); > render() // Такой синтаксис гарантирует, что `this` привязан к handleClick. return ( button onClick=() => this.handleClick()>>  Нажми на меня button> ); > >

Problém s touto syntaxí je, že pokaždé, když se LoggingButton vykreslí, vytvoří se nové zpětné volání. Většinou to není velký problém. Pokud je však toto zpětné volání předáno jako prop podřízeným komponentám, tyto komponenty mohou být znovu vykresleny. Doporučujeme provést vazbu v konstruktoru nebo použít syntaxi polí třídy, abyste se vyhnuli problémům s výkonem.

Předávání argumentů obslužným rutinám událostí

Uvnitř smyčky je často potřeba obslužné rutině události předat další argument. Pokud je například id identifikátor řádku, můžete použít následující možnosti:

button onClick=(e) => this.deleteRow(id, e)>>Удалить строкуbutton> button onClick=this.deleteRow.bind(this, id)>>Удалить строкуbutton>

Dva výše uvedené řádky jsou ekvivalentní a používají šipkové funkce a Function.prototype.bind.

V obou případech bude argument e, který představuje událost React, předán jako druhý argument za identifikátorem. Při použití šipkové funkce musíte argument předat explicitně, ale s funkcí bind se všechny následující argumenty předávají automaticky.