State w React.js 2

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

State w React.js 2

Pod koniec poprzedniego wpisu zadałem podchwytliwe ćwiczenie dotyczące state w React.js. Jeśli jeszcze go nie wykonałaś/eś to teraz jest ten moment, aby wrócić i spróbować ;) W tym wpisie rozwijam temat state, opisuję dokładniej jak działa setState i jakie argumenty przyjmuje.

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

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

Gravatar	Imię	Adres	Data
	Piotr W		2018-01-15 21:46

Cześć, kod stworzonego komponentu z ćwiczenia:
class App extends React.Component {

    constructor(){
        super();
        this.state = {
            name: "",
            surName: ""
        };
    }

    output(){
        this.setState (() => {
            return { 
                name: this.refs.name.value,
                surName: this.refs.surName.value
            }
        })
    }

    render(){
        return (
            <div>
                <input type="text" placeholder="Name" ref="name" onInput={this.output.bind(this)} ></input>
                <input type="text" placeholder="Surname" ref="surName" onInput={this.output.bind(this)} ></input>
                <output> {this.state.name} {this.state.surName} </output>
            </div>
        );
    }
}

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2018-01-15 23:45

Działa ;) Ale mam uwagę: ref w postaci stringa jest już od pewnego czasu niezalecany.

Zresztą nie mówiłem jeszcze o nich w tym kursie, więc da się bez refów — do funkcji onInput przekazany jest obiekt event, który zawiera m.in. pole currentTarget — czyli aktualnie edytowany input, z którego można odczytać value.

 
 

Komentarz zaimportowany z WordPressa

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

Gravatar	Imię	Adres	Data
	Piotr W		2018-01-16 10:54

Super, dzięki za wyjaśnienie. :-) Czekam na kolejną część kursu.

 
 

Komentarz zaimportowany z WordPressa

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

Gravatar	Imię	Adres	Data
	Bartek		2018-01-22 01:37

Czy tak jest dobrze? :)

class App extends React.Component {
constructor() {
super();
this.state = {
name : "",
surName : "",
};
}

render() {
return (

Imie <input onChange={ e => {this.setState({name: e.target.value});} } type="text"/> {this.state.name}

Nazwisko <input onInput={ e => {this.setState({surName: e.target.value});}} type="text"/> {this.state.surName}

);
}

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

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2018-01-22 16:53

Działa! :) Ale można kilka rzeczy poprawić:

Do onChange zamiast przekazywać arrow function, lepiej byłoby przekazać metodę klasy — czyli zamiast e => {this.setState(…)} przenieść ten kod do metody np. onInputNameChange. Dlaczego? Czytelność kodu i wydajność.

Drobne uwagi:

• type="text" jest niepotrzebny.
• powinien mieć w środku inputa albo mieć atrybut for="…".

I moje czepialstwo: surname, a nie surName ;)

 
 

Komentarz zaimportowany z WordPressa

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

Gravatar	Imię	Adres	Data
	Bartek		2018-01-22 20:49

Dzięki za code review na pewno wyciągnę wnioski czekam na więcej 😊

 
 

Komentarz zaimportowany z WordPressa

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

Gravatar	Imię	Adres	Data
	Michał		2018-01-23 21:52

Cześć, moje rozwiązanie:

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      first: "",
      last: "",
    };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    this.setState({[event.target.name]: event.target.value })
  }
  render() {
    return 

      
        First
        
      

      
        Last
        
      
      

      {this.state.first} {this.state.last}
    
;
  }
}

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

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

Bardzo ładne rozwiązanie! :)
Szkoda, że Disqus tak psuje JSX — będę musiał pomyśleć co z tym zrobić :/

 
 

Komentarz zaimportowany z WordPressa

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

Gravatar	Imię	Adres	Data
	Mat Mic		2018-01-30 18:05

Fajne rozwiązanie, właśnie się zastanawiałem jak to zrobić z użyciem tylko jednej funkcji

 
 

Komentarz zaimportowany z WordPressa

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

Gravatar	Imię	Adres	Data
	Maciej Grędecki		2018-02-03 14:52

Cześć, to jest moje rozwiązanie ;)

class NameForm extends React.Component {
constructor(props) {
super(props);
this.state = {value: ''};

this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);

}

handleChange(event) {
this.setState({value: event.target.value});
}

handleSubmit(event) {
alert('A name was submitted: ' + this.state.value);
event.preventDefault();
}

render() {
return (

      Name:
      
    
    
  
);

}
}

ReactDOM.render(
,
document.getElementById('root')
);


 
 

Komentarz zaimportowany z WordPressa

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

Gravatar	Imię	Adres	Data
	Maciej Grędecki		2018-02-03 14:53

Cześć, to jest moje rozwiązanie ;)

class App extends React.Component{
  constructor(props) {
    super(props);
    this.state = {firstName: '', lastName: ''};
  }
  firstNameChange(event) {
    this.setState({firstName: event.target.value})
  }
  lastNameChange(event) {
    this.setState({lastName: event.target.value})
  }
  
  render(){
    return(
      

                
        
        {`${this.state.firstName} ${this.state.lastName}`}
      
    )
  }
}

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

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

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

Dookoła {this.state…} i tym podobnych nie powinno być cudzysłowów :)

 
 

Komentarz zaimportowany z WordPressa

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

Gravatar	Imię	Adres	Data
	Kuba Zalewski		2018-02-25 13:45

Ok, zadanie proste, ale zastanawia mnie jedna rzecz. Uzywając eventu onChange lub onInput zmiany widoczne są tuż po wpisaniu czegokolwiek w inputa. Z punktu widzenia wydajności chyba nie jest to najlepsze rozwiązanie ze względu na to, że wpisując swoje imię funkcja będzie wywoływana po wprowadzeniu każdej litery. Istnieje możliwosć wyswietlenia wyniku dopiero po zakonczeniu wpisywania? Cos w stylu ontransitionend w css'ie :D

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

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

Z punktu widzenia wydajności nie stanowi to żadnego problemu.
Jeśli chcesz to oczywiście każdą funkcję można po prostu opakować w throttle albo debounce.

 
 

Komentarz zaimportowany z WordPressa

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

Gravatar	Imię	Adres	Data
	Testowanie Testów		2018-03-18 14:44

Mój kod do zadania domowego jakieś uwagi? chętnie wysłucham aby poprawić kod
class App extends React.Component {

constructor() {
super();
this.state = {
    
    first: " ",
    last: " "
    
};
     
}
renderFirstName(e){
    this.setState({
        first: e.target.value
    });
}

renderLastName(e){
    this.setState({
        last: e.target.value
    });
}
render(){
    return(
        
    <form>
        <input type="text" value={this.state.first} onInput={this.renderFirstName.bind(this)}/>
        <input type="text" value={this.state.last} onInput={this.renderLastName.bind(this)}/>
        <br/>
        <output>{this.state.first}</output>
        <output>{this.state.last}</output>
    </form>
     
        
    );
    
}

}

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

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2018-03-18 18:13

Wszystko spoko, tylko czemu nazwy metod to renderFirstName i renderLastName? :)

 
 

Komentarz zaimportowany z WordPressa

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

Gravatar	Imię	Adres	Data
	Testowanie Testów		2018-03-18 18:27

Bez powodu :) twórczość mnie poniosła :)

 
 

Komentarz zaimportowany z WordPressa

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

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

Czy jest możliwość wywołania w komponencie metody z innego komponentu (nie rodzica ani dziecka)? Oraz czy jest możliwość przekazania state jednego komponentu do drugiego(również to nie jest rodzic ani dziecko tego komponentu)

 
 

Komentarz zaimportowany z WordPressa

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

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

W komponencie App mam 2 komponenty - ContactsList i Header. W Header mam komponent Modal wewnątrz którego znajduje się przycisk Add. W ContactLists natomiast znajduje się komponent ContactItem (podobnie do tego co znajduje się w rozdziale 5, z tym że u mnie przycisk Dodaj znajdujący sie w Header jest osobnym komponentem, wewnątrz którego znajduje się bootstrapowy modal). Wewnątrz modalu znajdują się 2 inputy typu text oraz przycisk Add. Chciałbym teraz, by po wypełnieniu pól name i department i wcisnięciu przycisku Add (które to znajduja się w modalu) została wywolana metoda, znajdująca się w komponencie ContactsList, która aktualizuje state tego komponentu i w związku z tym pojawiłby się nowy kontakt na liście (w state komponentu ContactsList przechowuje ContactItemy w tablicy, którą nastepnie wyswietlam), z name i department takimi jak wprowadziliśmy w modalu. Jak moge coś takiego zrobić?

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

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

Nie ma takiej możliwości, nie miałoby to sensu.
Możesz użyć do tego wzorców projektowych i zewnętrznego serwisu.

 
 

Komentarz zaimportowany z WordPressa

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

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

Easy! :)

https://codepen.io/Rotarepmi/pen/vrNJza

 
 

Komentarz zaimportowany z WordPressa

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

Gravatar	Imię	Adres	Data
	arek k		2019-01-19 15:44

Mam szalone nazwy, ale działa i jest inaczej napisane niż wysłał Maciej Grędecki

import React from "react"; import "./../node_modules/semantic-ui-css/semantic.css";

class AppTest extends React.Component {
constructor() {
super();
this.state = { zmienna: 0, przedzmienna: 0 };
this.zmien = this.zmien.bind(this);
this.przedzmien = this.przedzmien.bind(this);
this.dodajoddziecka = this.dodajoddziecka.bind(this);
this.odejmijoddziecka = this.odejmijoddziecka.bind(this);
}
zmien() {
this.setState({
zmienna: this.state.przedzmienna
});
console.log(this.state.przedzmienna);
}
przedzmien(event) {
this.setState({ przedzmienna: event.target.value });
console.log(this.state.przedzmienna);
}
dodajoddziecka() {
this.setState({
zmienna: this.state.zmienna + 1
});
}
odejmijoddziecka() {
this.setState({
zmienna: this.state.zmienna - 1
});
}
render() {
return (

Zatwierdź

);
}
}
class Greeting extends AppTest {
render() {
return (

Zmienna:{this.props.greeting}
+
-

);
}
}
export default AppTest;

 
 

Komentarz zaimportowany z WordPressa

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

Gravatar	Imię	Adres	Data
	arek k		2019-01-19 15:49

Panie Michale czy mogę otrzymać pańską opinię? :)

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2019-01-21 22:24

W drugim komponencie powinno być extends React.Component, a nie extends AppTest.

Nazwy pól i funkcji niewiele mówią — co to znaczy "przedzmien"? Funkcje zwyczajowo nazywamy sformułowaniami zawierającymi czasownik w trybie rozkazującym.

W funkcjach dodajoddziecka i odejmijoddziecka do this.setState powinna być przekazana funkcja, a nie obiekt. W innym wypadku skrajnym rezultatem może być utrata części zmian.

 
 

Komentarz zaimportowany z WordPressa

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

Gravatar	Imię	Adres	Data
	Artur		2019-01-27 00:23

var React = require('react');
var ReactDOM = require('react-dom');

class MyComponent extends React.Component{
constructor(){
super();
this.state = {firstName:" ", lastName:" "};
}
render(){
return(

Imie:

Nazwisko:

);
}
handleInput(e){
this.setState({firstName: e.target.value});
}
handleInput2(e){
this.setState({lastName: e.target.value});
}
};

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

 
 

Komentarz zaimportowany z WordPressa

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

Gravatar	Imię	Adres	Data
	Joanna Trapp		2019-01-30 22:11

Mój kod:
class App extends React.Component {

		constructor(){
			super();
			this.state = {name: "", surname: ""};
		}
		setName(e){
			this.setState({name: e.target.value})
		}
		render(){ return (
	<div>
				<input value={this.state.name} onInput={this.setName.bind(this)}></input><output>{this.state.name}</output>
	</div>
	); } }</code>

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

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

Brakuje jeszcze pola na nazwisko :)

 
 

Komentarz zaimportowany z WordPressa

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

Gravatar	Imię	Adres	Data
	Miłosz Kulesza		2019-04-13 20:39

a ja pozwoliłem sobie zmienić zdarzenie :)

class App extends React.Component{

            constructor(){


                super();


                this.state = {firstName: "", lastName: ""};


            }




            render(){


                return(


                    


                        


                        {this.state.firstName}


                        


                        {this.state.lastName}


                    


                );


            }




            setFirstName(e){


                this.setState({


                    firstName: e.target.value


                });


            }




            setLastName(e){


                this.setState({


                    lastName: e.target.value


                });


            }


        }


        ReactDOM.render(, $('#app')[0]);

 
 

Komentarz zaimportowany z WordPressa

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

Gravatar	Imię	Adres	Data
	Miłosz Kulesza		2019-04-13 20:39

A ja pozwoliłem sobie zmienić zdarzenie :)

class App extends React.Component{ constructor(){ super(); this.state = {firstName: "", lastName: ""}; }

            render(){
                return(
                    <div>
                        <input onChange = {this.setFirstName.bind(this)} />
                        <output>{this.state.firstName}</output><br /><br />
                        <input onChange = {this.setLastName.bind(this)} />
                        <output>{this.state.lastName}</output><br />
                    </div>
                );
            }


            setFirstName(e){
                this.setState({
                    firstName: e.target.value
                });
            }


            setLastName(e){
                this.setState({
                    lastName: e.target.value
                });
            }
        }


        ReactDOM.render(<App />, $('#app')[0]);

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2019-04-15 10:43

W React onChange i onInput robią dokładnie to samo :)

 
 

Komentarz zaimportowany z WordPressa

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

Gravatar	Imię	Adres	Data
	Miłosz Kulesza		2019-04-15 18:17

Aaa to nie wiedziałem :D do tej pory sie spotkałem z tym, że onInput jest wywoływane gdy skończę wpisywać tekst do inputa i klikne gdziekolwiek indziej :D

 
 

Komentarz zaimportowany z WordPressa

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

Gravatar	Imię	Adres	Data
	Damian Czapiewski	http://webdevchars.com	2019-06-04 01:39

Ciekawy thumbnail 😂

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2019-06-04 11:29

Jaki?

 
 

Komentarz zaimportowany z WordPressa

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

Gravatar	Imię	Adres	Data
	Damian Czapiewski	http://webdevchars.com	2019-06-04 17:09

Ten przypisany do tego posta - ta egzotyczna gruszka na niebieskich kaflach

 
 

Komentarz zaimportowany z WordPressa

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

Gravatar	Imię	Adres	Data
	Damian Czapiewski		2019-06-04 05:30

Delegacja do forma diva :)

class App extends React.Component {
constructor() {
super();
this.state = {name: '', surname: ''};
this.inputHandler = this.inputHandler.bind(this);
}
inputHandler(e) {
var target = e.target;
if (target.tagName.toLowerCase() == 'input') {
let name = target.name;
let currVal = this.state[name];
this.setState({[name]: target.value});
}
}
render() {
return (


{this.state.name + ' ' + this.state.surname}


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

 
 

Komentarz zaimportowany z WordPressa

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

Gravatar	Imię	Adres	Data
	Patrycja Bąk		2019-11-05 19:54

class App extends React.Component {
constructor () {
super();
this.state = {inputValue: 'initial value'}
}
render () {
return (

<input onInput = {(e)=> {this.setState({inputValue: e.target.value})}} />

{this.state.inputValue}

     )
 }
}

analogicznie dla surname :)

 
 

Komentarz zaimportowany z WordPressa

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

Gravatar	Imię	Adres	Data
	Fkare		2020-03-13 03:29

constructor(props) {
super(props);
this.state = {imie: '', nazwisko: ''};

    this.inputHandler = this.inputHandler.bind(this)
}

inputHandler(e){
        this.setState({
            [e.target.name]: e.target.value
        })
}
render() {
    return (
        <div>
            <label>
                Imie:
                <br/>
                <input name="imie" onInput={this.inputHandler} />
                <output>{this.state.imie}</output>
                <br/>
                Nazwisko:
                <br/>
                <input name="nazwisko" onInput={this.inputHandler}/>
                <output>{this.state.nazwisko}</output>
            </label>
            <br/>
        </div>
    );
}

}

 
 

Komentarz zaimportowany z WordPressa

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

Gravatar	Imię	Adres	Data
	Rafał Sikora		2020-03-18 15:18

pytanko jak do updatera przemycić event?

this.setState(
prevState => {
str : prevState.str + e.currentTarget.value
}
}

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2020-03-18 16:34

Nie przemycać wcale ;) Przypisz value do stałej i użyj tylko jej.

Alternatywnie: Przed setState wywołaj e.persist(), ale nie polecam :)

 
 

Komentarz zaimportowany z WordPressa

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

Gravatar	Imię	Adres	Data
	Rafał Sikora		2020-03-18 15:44

a mój kodzik:

class App extends React.Component {

constructor() {
  super();
  this.state = {
    name : "",
    surname : ""
  }  
}

inputStr (e) {
  const inputName = e.currentTarget.name;
  this.setState( { [inputName] : e.currentTarget.value });
}

render () {
  return (
    
      this.inputStr(e)} />
      this.inputStr(e)} />
      {this.state.name} {this.state.surname}
    
  )
}

}

 
 

Komentarz zaimportowany z WordPressa

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

Gravatar	Imię	Adres	Data
	Edward		2021-07-21 23:20

Na czym polega to podwójne kliknięcie? XD Bo kompletnie tego nie czaje, że dwa razy LPM mam kliknąć pod rząd i to ma dać inkrementacje do doubleClick? xd

 
 

Komentarz zaimportowany z WordPressa

[zchpit]

Być może źle to zrobiłem. Kod powinien być nieco bardziej fancy, ale cały czas się uczę. Np. w tej lekcji nauczyłem się to, że każdy event musi zostać zarejestrowany w konstruktorze inaczej konsola krzyczy wyjątkami:

class App extends React.Component {
constructor() {
super();
this.state = {
firstName: '',
surname: '',
};

 this.setName = this.setName.bind(this);
 this.setSurname = this.setSurname.bind(this);

}

render() {
return (

    <output>{this.state.firstName} {this.state.surname}</output>

  </div>
);

}

setName(event) {
this.setState({firstName: event.target.value});
}
setSurname(event) {
this.setState({surname: event.target.value});
}
}
ReactDOM.render(, document.getElementById("app"));