Stan komponentów React.js

[type-of-web-komentarze[bot]]

Stan komponentów React.js

Przyszedł czas na poznanie tajemniczego state w React.js. Udało nam się tworzyć komponenty, które pięknie wyświetlały przekazane propsy, ale trzeba przyznać szczerze: Bez wewnętrznego stanu nie da się zbudować funkcjonalnej aplikacji. Dzisiaj nauczysz się taki stan dodawać i wykorzystywać :)

https://typeofweb.com/state-react-js

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Krzysztof Pawłowski		2018-01-12 18:07

class App extends React.Component {
constructor() {
super();
this.state = {counter: 0, sumOfClicks: 0, dblClicks: 0};
}

render() {
return (

+
{this.state.counter}
-
Suma kliknięć: {this.state.sumOfClicks} | Podwójne kliknięcia:{this.state.dblClicks}

);
}

increment() {
this.setState({
counter: this.state.counter + 1,
sumOfClicks: this.state.sumOfClicks + 1
})
}

decrement() {
this.setState({
counter: this.state.counter - 1,
sumOfClicks: this.state.sumOfClicks + 1
})
}

counterDblClicks() {
this.setState({
dblClicks: this.state.dblClicks + 1
})
}
}
ReactDOM.render(, document.getElementById("app"));

Czy o to chodziło w ćwiczeniu? Bo nie jestem pewny...

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2018-01-12 18:20

Dokładnie :)

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Andrzej Jaworski		2019-01-04 11:27

Witam, fajny kurs.

Ale w tym dokładnie przypadku to onDoubleClick nie dziła dokładnie jak by się chciało, ponieważ zlicza podwójne kliknięcia w element do którego jest przypisane. A miało zliczać kliknięcia w przyciski.

Moja propozycja to wsadzić te przyciski w jakieś divy i do nich podpiąć onDoubleClick. Działać działa. Oto kod Krzysztofa po małej modyfikacji:

class App extends React.Component {
constructor() {
super();
this.state = {counter: 0, sumOfClicks: 0, dblClicks: 0};
}

 render() {
 return (
 <div>
 <div onDoubleClick={this.counterDblClicks.bind(this)}>
      <button onClick={this.increment.bind(this)}>+</button>
 </div>
 <output> {this.state.counter} </output>
 <div onDoubleClick={this.counterDblClicks.bind(this)}>
 <button onClick={this.decrement.bind(this)}>-</button>
 </div>
 <output>Suma kliknięć: {this.state.sumOfClicks} | Podwójne kliknięcia:{this.state.dblClicks}</output>
 </div>
 );
 }

 increment() {
 this.setState({
 counter: this.state.counter + 1,
 sumOfClicks: this.state.sumOfClicks + 1
 })
 }

 decrement() {
 this.setState({
 counter: this.state.counter - 1,
 sumOfClicks: this.state.sumOfClicks + 1
 })
 }

 counterDblClicks() {
 this.setState({
 dblClicks: this.state.dblClicks + 1
 })
 }

}
ReactDOM.render(, document.getElementById("app"));

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2019-09-19 17:54

Miało zliczać podwójne kliknięcia na elemencie z wynikiem, czyli właśnie .

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Andrzej Jaworski		2019-09-19 17:54

Racja doczytałem. Uznajmy to za małe urozmaicenie.

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Dizu Blog	http://dizu.pl	2018-01-17 10:26

Cześć,
Czy możesz proszę napisać coś więcej o super(). Nie do końca rozumiem po co? :)
Pozdrowienia :)

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2018-01-17 13:00

W skrócie, super() to wywołanie konstruktora klasy, po której się dziedziczy. W tym przypadku — React.Component.

Można też go użyć do wywołania metod statycznych rodzica — super.metoda()

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Mat Mic		2018-01-30 15:53

Cześć Michał, w sumie natrafiłem na Twój blog już po pewnym czasie, gdy już poniekąd przejrzałem tutorial główny Reacta (np. grę Tic Tac Toe), ale ten kurs tutaj fajnie mi to wszystko usystematyzował. Mi udało się to sklecić w taki sposób, nie wiem czy to dobrze, że rozbijam przyciski na dwa odrębne functional components.

P.S Ups, to jest kod który pisałem od podstaw czytania tego artykułu, a nie zadanie domowe jeszcze :D
https://codesandbox.io/s/5vq4l41q14

No to... następny wpis! :D

A tak w ogóle, to jestem osobą, która bardzo chce zmienić typową branżę IT na właśnie programowanie, więc chwytam się czego się da, by nauczyć się jak najszybciej. Podziwiam ludzi, którzy mają wytrwałość by przejść przez te wszystkie dokumentacje.

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2018-02-21 11:36

Trochę niepotrzebnie. Dwa guziki są praktycznie identyczne — różnią się tylko funkcją i napisem (+ albo -). Można by z nich zrobić jeden komponent, który przyjmuje 2 propsy: tekst oraz funkcję :)
Poza tym ładny kod!

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Jaari		2018-02-08 22:37

Czy jest jakaś różnica między inicjalizacją state'ów w konstruktorze, tak jak tutaj, a użyciem do tego funkcji getInitialState()?

Pozdrawiam!

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2018-02-09 09:12

Jeśli używasz ES5 to nie masz wyjścia i jesteś zmuszony użyć getInitialState. W innym wypadku nie ma to sensu.

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Kuba Zalewski		2018-02-24 18:22

Wow. Nie przeczytałem dokładnie zadania i próbowałem dodawać dwa eventy na jeden przycisk, tym samym straciłem jakieś 20 minut, żeby tylko dowiedzieć się, że dwóch eventow nie da się podpiąć :D no cóż, przynajmniej się czegoś dowiedziałem, a kurs świetny :) Moj kod do tego wpisu:

class App extends React.Component {
constructor() {
super();
this.state = {counter: 0, totalClicks: 0, doubleClicks: 0};
}

render() {
return (

+
-

Suma: {this.state.counter}

Kliknięć Łącznie: {this.state.totalClicks}

Podwójnych kliknięć: {this.state.doubleClicks}

  </div>
);

}

increment() {
this.setState({
counter: this.state.counter + 1,
totalClicks: this.state.totalClicks +1
})
}

decrement() {
this.setState({
counter: this.state.counter - 1,
totalClicks: this.state.totalClicks +1
})
}

dblClicked() {
this.setState({
doubleClicks: this.state.doubleClicks +1
})
}
}

ReactDOM.render(, document.getElementById("app"));

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2018-02-25 11:52

No nie da się podpiąć click i double click na tym samym elemencie :(
Poza tym dobrze :D

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	rumc		2018-03-22 12:32

mówisz, że nie da się podpiąć na jednym elemencie click i double click,
ja podpiąłem i działa bez zarzutu, pytanie czy jest to zła konwencja? class Counter extends React.Component {
constructor() {
super()
this.state = {
counter : 0,
clicks : 0,
doubleClicks: 0
}
}

render () {
return (

+
{this.state.counter}
All clicks: {this.state.clicks}
Double clicks: {this.state.doubleClicks}
-

);
}

onDoubleClickHandler() {
this.setState({doubleClicks : this.state.doubleClicks + 1})
}

onIncrementHandler() {
this.setState({counter : this.state.counter + 1, clicks : this.state.clicks + 1})
}

onDecrementHandler() {
this.setState({counter : this.state.counter - 1, clicks : this.state.clicks + 1})
}

}

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2018-03-22 12:50

Działa, ale tylko tak trochę :P Jak odłączysz onClick to zaczyna działać dobrze.

Nie jest polecane podpinanie dblClick i click na tym samym elemencie — dlatego, że bardzo trudne jest odróżnienie ich od isebie i efekty są niespójne:

Don't register click and dblclick events on the same element: it's impossible to distinguish single-click events from click events that lead to a dblclick event.

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Marcin Groszkiewicz		2019-01-04 11:27

Czy da się w setState wywołać metodę w tym wypadku np totalClicks?
totalClicks() {
this.state.totalClicks +1
}

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2019-09-19 17:54

Nie bardzo rozumiem, co chcesz uzyskać?
Do setState można przekazać obiekt lub funkcję, która musi zwrócić nowy stan.

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Ola Gruchała		2019-01-04 11:27

Jestem mega wdzięczna za Twoją robotę - rewelacyjny kurs! To tutaj porządnie zrozumiałam props i state. I idę do kolejnych lekcji. Wklejać kodu nie będę, ale działa :)

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2019-09-19 17:54

Polecam się :D I zapraszam na Disqus :)

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Łukasz Dębowski		2019-01-04 11:27

W czym takie rozwiązanie jest gorsze? (Zrobiłem coś podobnego zanim wszedłem w ten rozdział i działa, do tego jest to sporo mniej kodu, łatwiejsze do zrozumienia :)

class App extends React.Component {
constructor() {
super();
this.counter = 0;
}

render() {
return (

+
{this.counter}
-

);
}

increment() {
this.counter++
}

decrement() {
this.counter--
}
}

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Łukasz Dębowski		2019-09-19 17:54

Dobra ten akurat przykład nie działa :D Mój błąd ;p Ale np już coś takiego działa:

import React, { Component } from "react";
import "./App.css";

class ContactItem extends Component {
constructor(props) {
super(props);
this.counter = 0;
}

render() {
const imgUrl = https://api.adorable.io/avatars/55/${this.props.login}.png;
return (
<li onClick={this.handleOnClick} className="list-group-item" style={{ padding: "8px", borderTop: this.props.border }}>
<img src={imgUrl} width="36" height="36" style={{ borderRadius: "5px", float: "left" }} alt="Avatar" />
<div style={{ float: "left", marginLeft: "10px", height: "36px" }}>
<p className="font-weight-bold" style={{ fontSize: "15px", marginBottom: "-10px" }}>
{this.props.name}

<span style={{ fontSize: "12px" }}>{this.props.department}


);
}

handleOnClick = () => {
console.log(You clicked on ${this.props.name}! ${this.props.name} now has ${++this.counter} ${this.counter === 1 ? "click" : "clicks"}!);
};
}

export default ContactItem;

Chodzi mi o zasadność uzywania this.setState() ponad zwykłe this.counter++

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Łukasz Dębowski		2019-09-19 17:54

Chyba już wiem, this.counter++ nie zaktualizuje mi elementu na stronie, prawda? Wyświetlenie w konsoli nie wymaga aktualizacji DOMu i dlatego nie było problemu? :)

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Bartosz Ficek		2019-01-04 11:27

class Licznik extends React.Component{
constructor(){
super();
this.state = {counter: 0, suum: 0, doubleClick: 0};
}
render(){
return(

+
{this.state.counter}
-


{this.state.suum}


{this.state.doubleClick}

);}

	 increment(){
		this.setState({
		counter: this.state.counter +1,
		suum: this.state.suum +1
		})
		}
		
	decrement(){
		this.setState({
		counter: this.state.counter -1,
		suum: this.state.suum +1
		})
		}	
	double(){
	this.setState({
	doubleClick: this.state.doubleClick +1
	})
	}		
}

Czy poprawnie ?

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2019-09-19 17:54

Jeśli działa to jest poprawnie :)

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Joanna Trapp		2019-01-30 21:43

Mój state:
this.state = {counter: 0, sumOfClicks: 0, sumOfDoubleClicks: 0};

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	pwinnicki		2019-07-07 16:08

Takie pytanie - w konstruktorze oraz w super nie podałem "props" a mimo to props zostały prawidłowo przekazane. Jaka jest więc różnica czy piszę:
constructor() {
super()
...

czy też
constructor(props) {
super(props)

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2019-07-07 16:45

Nie pamiętam teraz dokładnie, kiedy ma to znaczenie, ale żeby nie było niemiłych niespodzianek, to zawsze pisz super(props).

A tak naprawdę, to constructor raczej Ci się nie przyda, w kolejnych lekcjach (create-react-app) już go nie będzie.

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	pwinnicki		2019-07-10 13:05

Jedna funkcja increment z przekazaniem parametru o ile zmieni się licznik?

increment = (ile) => e => {

this.setState({

 counter: this.state.counter + ile

})

}

render() {

return (

+

{this.state.counter}

-

);

}

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	pwinnicki		2019-07-11 13:34

class App extends React.Component {
constructor() {
super();
this.state = {counter: 0, clicks: 0, dblclicks: 0};
this.klikniecie = this.klikniecie.bind(this);
}

  klikniecie = (ile) => e => {
      if (e.type=="click") {
        this.setState(
            {
              counter: this.state.counter + ile,
              clicks: this.state.clicks + 1
            }
        ); 
      } else if (e.type=="dblclick") {
          this.setState({
              dblclicks: this.state.dblclicks + 1
        });
      }
  }
  
  render() {
    return (
      <div>
        <button onClick={this.klikniecie(1)}>+</button>
        <output onDoubleClick={this.klikniecie(0)}>{this.state.counter}</output>
        <button onClick={this.klikniecie(-1)}>-</button>
        <div>Kliknięcia: {this.state.clicks}</div>
        <div>Podwójne kliknięcia: {this.state.dblclicks}</div>
      </div>
    );
  }
  
}

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Piotr		2020-02-17 20:01

Ja to wykoncypowałem tak:

class ClickCounter extends React.Component { constructor() { super(); this.state = {counter: 0, totalClicks: 0, totalDoubleClicks: 0}; }

render() {
return (

    +
    {this.state.counter}        
    -
    Total clicks: {this.state.totalClicks}
    Total double clicks: {this.state.totalDoubleClicks}
  
);

}

increment() {
this.setState({
counter: this.state.counter + 1,
totalClicks: this.state.totalClicks + 1
})
}

decrement() {
this.setState({
counter: this.state.counter - 1,
totalClicks: this.state.totalClicks + 1
})
}

doubleClick() {
this.setState({
totalDoubleClicks: this.state.totalDoubleClicks + 1
})
}

}

export default ClickCounter


 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Fkare		2020-03-12 21:44

class App extends React.Component{
render() {
return (

+
{this.state.counter}
-


How many Clicks:
{this.state.counter2}


How many double Ckicks:
{this.state.counter3}

);
}
doubleClick(){
this.setState({
counter3: this.state.counter3 +1,
})
}
addOne(){
this.setState({
counter: this.state.counter +1,
counter2: this.state.counter2 +1
})
}
lessOne(){
this.setState({
counter: this.state.counter -1,
counter2: this.state.counter2 +1
})
}
constructor() {
super();
this.state = {counter: 0, counter2: 0, counter3: 0};
}
}

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Michał Marcak		2021-04-11 12:25

Nie mogę dodawać komentarzy z kodem :(

 
 

Komentarz zaimportowany z WordPressa

[zchpit]

class App extends React.Component {
constructor() {
super();
this.state = {counter: 0, sumCounter: 0, doubleCounter: 0};
}

render() {
return (

+
{this.state.counter}
-
{this.state.sumCounter}
{this.state.doubleCounter}

);
}

increment() {
this.setState({
counter: this.state.counter + 1,
sumCounter: this.state.sumCounter + 1
})
}
doubleClickIncrement() {
this.setState({
doubleCounter: this.state.doubleCounter + 1
})
}

decrement() {
this.setState({
counter: this.state.counter - 1,
sumCounter: this.state.sumCounter + 1
})
}

doubleClickDecrement() {
this.setState({
doubleCounter: this.state.doubleCounter - 1
})
}
}
ReactDOM.render(, document.getElementById("app"));