Languages
[Edit]
PL

React - useState - przykłady użycia

3 points
Created by:
Dirask JS Member
3430

W tym artykule chcieliby┼Ťmy pokaza─ç prosty przyk┼éad┬áu┼╝ycia hooka useState w komponencie funkcyjnym w┬áReakcie.

Poniższy przykład pokazuje, jak zrobić prosty licznik, który jest inkrementowany przy każdym kliknięciu przycisku button.

W┬ákomponencie App tworzymy hook useState, kt├│ry przechowuje┬ástan┬ánaszego komponentu wewn─ůtrz┬álicznika. Bardzo wa┼╝ne jest u┼╝ywanie hook├│w na pocz─ůtku komponent├│w (przed return) - jest to g┼é├│wna zasada obowi─ůzuj─ůca w┬áReakcie.
Do aktualizacji licznika┬áu┼╝ywamy funkcji setCounter, przekazuj─ůc┬ácounter + 1┬ájako nowy stan - powoduje to┬áponowne renderowanie komponentu┬áApp z nowym stanem.

Uruchamialny przykład:

// ONLINE-RUNNER:browser;

//Note: Odkomentuj wiersze z importami podczas pracy z kompilatorem JSX
//import React from 'react';

const App = () => {
  const [counter, setCounter] = React.useState(0);
  return (
	<div>
	  <div>Licznik: {counter}</div>
	  <button onClick={() => setCounter(counter + 1)}>Dodaj 1</button>
	</div>
  );
};

const root = document.querySelector('#root');
ReactDOM.render(<App />, root );

Przykład użycia useState w komponentach potomnych

Mo┼╝liwe jest r├│wnie┼╝ zachowanie stanu wewn─ůtrz zagnie┼╝d┼╝onych komponent├│w. Dzia┼éa to┬áw ten sam spos├│b - wymaga u┼╝ycia┬áfunkcji┬áuseState().

Sprawdź poniższy przykład, aby zobaczyć, jak to działa:

// ONLINE-RUNNER:browser;

//Note: Odkomentuj wiersze z importami podczas pracy z kompilatorem JSX
//import React from 'react';

const ChildComponent = () => {
  const [counter, setCounter] = React.useState(0);
  return (
	<div>
	  <span>[ChildComponent] Licznik: {counter}</span>{' '}
	  <button onClick={() => setCounter(counter + 1)}>Dodaj 1</button>
	</div>
  );
};

const App = () => {
  const [counter, setCounter] = React.useState(0);
  return (
	<div>
      <div>
        <span>[App] Licznik: {counter}</span>{' '}
        <button onClick={() => setCounter(counter + 1)}>Dodaj 1</button>
      </div>
      <ChildComponent />
	</div>
  );
};

const root = document.querySelector('#root');
ReactDOM.render(<App />, root );

ReactJS (PL)

React - useState
Native Advertising
­čÜÇ
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

ÔŁĄ´ŞĆ­čĺ╗ ­čÖé

Join