Formularze w React.js — kontrolowane komponenty

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

Formularze w React.js — kontrolowane komponenty

Dzisiaj zajmiesz się imlementacją formularzy w React.js. Już wcześniej dokonywałaś/eś interakcji z polami formularza — ale raczej w prosty sposób. Dzisiaj o formularzach kontrolowanych w React.js

https://typeofweb.com/formularze-react-js-kontrolowane-komponenty

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

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

Trochę to trwało, ale jest:
https://jsfiddle.net/OlaGruchala/jzLno7p0/10/

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

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

Bardzo dobre rozwiązanie :) 👍

 
 

Komentarz zaimportowany z WordPressa

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

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

Coś przegapiłem, albo nie doczytałem. W punkcie 8 kursu, napisałeś, że aby użyć state potrzebny jest konstruktor klasy a w nim wywalanie super(). W formularzu nie używasz konstruktora i działa. Dlaczego?

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

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

Rzeczywiście, jakoś umknęło mi, aby o tym jasno i wyraźnie wspomnieć! Dzięki za uwagę.

Otóż: Dzięki używaniu create-react-app, mam automatycznie włączone pewne presety w Babelu, które sprawiają, że mój kod jest prostszy. Konkretnie chodzi mi o opcję "Class Fields and Static Properties", dzięki której te dwa zapisy są równoważne:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { a: 1, b: 2 };
  }
}

class MyComponent extends React.Component {
  state = { a: 1, b: 2 };
}

 
 

Komentarz zaimportowany z WordPressa

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

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

Heh nigdy nie umiałem się przekonać do żadnego frameworka, ani biblioteki, jedynie jakieś animacje w jquery, albo jakieś pojedyncze elementy jak charts.js czy scroll revealjs, ale ten React wydaje się świetny. BTW nie mam dziś czasu się zagłębiać, ale jak przeglądam to ten kurs to kawał dobrej roboty.

 
 

Komentarz zaimportowany z WordPressa

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

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

https://codepen.io/Rotarepmi/pen/gKGRwp?editors=1010

 
 

Komentarz zaimportowany z WordPressa

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

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

https://codepen.io/pawelziezio/pen/odNOPG?editors=1010

 
 

Komentarz zaimportowany z WordPressa

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

Gravatar	Imię	Adres	Data
	Mateusz Flisikowski	https://mflisikowski.dev	2019-03-19 20:05

https://lh3.googleusercontent.com/-A5Brg1Tr66A/XJFICAGBAqI/AAAAAAAAQng/YU1syq6YcU4ncexGvjblnJtmB4p-mz-DgCK8BGAs/s0/2019-03-19.png

 
 

Komentarz zaimportowany z WordPressa

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

Gravatar	Imię	Adres	Data
	Mateusz Flisikowski	https://mflisikowski.dev	2019-03-19 20:05

czy robię to ok, czy można lepiej?

 
 

Komentarz zaimportowany z WordPressa

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

Gravatar	Imię	Adres	Data
	Artur Grabowski		2019-06-18 12:30

a co masz w wywolaniu ? :) bo Twoje rozwiazanie wyglada kozacko

 
 

Komentarz zaimportowany z WordPressa

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

Gravatar	Imię	Adres	Data
	Mateusz Flisikowski	https://mflisikowski.dev	2019-06-18 22:09

Zapewne miałem: .

 
 

Komentarz zaimportowany z WordPressa

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

Gravatar	Imię	Adres	Data
	Mateusz Flisikowski	https://mflisikowski.dev	2019-06-18 22:32

https://codepen.io/MateuszFlisikowski/pen/PrGKMZ?editors=0010
http://ccoenraets.github.io/es6-tutorial/destructuring/
https://kursjs.pl/kurs/es6/destructuring.php

 
 

Komentarz zaimportowany z WordPressa

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

Gravatar	Imię	Adres	Data
	Ola Gruchała		2019-03-29 13:44

Mam pytanie o textarea. Może ktoś znajdzie czas żeby zajrzeć :) Próbuję wyczyścić textarea po kliknięciu w "send", ale ponieważ jest to u mnie komponent kontrolowany to rozumiem że musiałabym to zrobić przez zmianę stanu. To z kolei nie daje efektu bo zmiana stanu w tym momencie czyści mi za szybko wartość i w efekcie zamiast tekstu wysyłam pusty string...

Jak to zrobić? Musze użyć niekontrolowanego komponentu?

https://codepen.io/OlaGruchala/pen/yrBBpw?editors=0010

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2019-03-29 18:25

Po kliknięciu w send, wyślij request, a następnie ustaw stan na pusty.

 
 

Komentarz zaimportowany z WordPressa

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

Gravatar	Imię	Adres	Data
	Artur Grabowski		2019-06-18 12:36

Mam i ja! Przesylanie argumentow w tym jezyku/frameworku jest na tyle roznych sposobow ze to jest jakas masakra.

https://pastebin.pl/view/2541f8f9

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2019-06-18 13:15

W sumie to jest chyba tylko jeden sposób — propsy? :)

 
 

Komentarz zaimportowany z WordPressa

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

Gravatar	Imię	Adres	Data
	Artur Grabowski		2019-06-18 13:30

Pewnie masz racje :p ale chodzi mi bardziej o takie rzeczy :

{this.props.contacts.map(this.contactToContactItem)}
onClick={this.displayMessage.bind(this,
message)

itd.

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2019-06-18 13:15

Nie potrzebujesz chyba metod handleMessageChange, handleColorChange, handleNameChange

 
 

Komentarz zaimportowany z WordPressa

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

Gravatar	Imię	Adres	Data
	Artur Grabowski		2019-06-18 13:23

Oczywiscie masz racje :D zapomanialem usunac tego co bylo na poczatku :)

https://pastebin.pl/view/5dfd7565

 
 

Komentarz zaimportowany z WordPressa

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

Gravatar	Imię	Adres	Data
	Rafał Sikora		2020-03-23 13:24

Wszystko cacy ;) .. ale
często dane nie wyglądają tak prosto: state = {value: ''};

tylko
state = { data : [ { "value" : 1, ... }, { "value2" : 2, ... } ] jak później modyfikować takie dane?

 
 

Komentarz zaimportowany z WordPressa

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

Gravatar	Imię	Adres	Data
	Rafał Sikora		2020-03-23 16:41

hmm w przykładzie z listą kontaktów
class App extends React.Component {
constructor() {
super();
this.state = { users : data,
test : 1 }
} ...

i zew. danymi data = [ { "name" : "John" ... } , "name" : "Lee" ... ];

próbuję właśnie zdobić jak pokazałeś:

this.setState(prevState => {
return {
users : prevState.users.map( el => {
el.status = 'online'; // czy tu następuje mutacja?
return el;
})
};
}, function() { console.log( data ) });
Lista kontaktów nie odświeża się.

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2020-03-23 17:42

Musiałbyś mi podesłać cały kod :)
Tak, tam jest mutacja. Generalnie chcemy ich unikać, ale to nie powinno zablokować w tym przypadku renderowania i powinno działać.

 
 

Komentarz zaimportowany z WordPressa

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

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

hmm generalnie nie mogę znaleźć przyczyny:

<script type="text/babel"> const dataorg = JSON.parse(document.querySelector('#users_data').innerHTML ); const data = [...dataorg]; data[0].name = "Lennna"; console.log(dataorg); // obie [] są takie same, dlaczego???     _Komentarz zaimportowany z WordPressa_

[typeofweb]

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

Bo mutujesz obiekt, który jest w obu :) data[0] i dataorg[0] to ta sama referencja.

 
 

Komentarz zaimportowany z WordPressa

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

Gravatar	Imię	Adres	Data
	Rafał Sikora		2020-03-23 19:20

tak mi się właśnie zdawało ;)
naprawiłem state taką konstrukcją:

tester = () => {
console.log( 'tester: ' + this.state.test );

  this.setState(prevState => {
    return {
      users : function(){ let a = [...prevState.users.map( (json, index) => {

      let jsonnew = {...json};
      if( index == 13 ){ jsonnew.status = "online"; } 
      return jsonnew;
      })]; 

        // powoduje update
        a.push({ "id" : a.length + 1, "login" : "k9", "name" : "Suzanne", "surname" : "Lee", "department" : "Test" + ( a.length + 1 ) });
        console.log(a);

        return a;
      }(),
      test : prevState.test + 1
    };
  }, function() { console.log(  data  ); console.log(  this.state.users  ); console.log( this.state.test ) });
}

@edit:
znalazłem również ciekawe rozwiązanie:

... users : function(){
// test 2
let stateCopy = JSON.parse( JSON.stringify( prevState.users ) );
stateCopy[13].status = 'online';
return stateCopy;
}(), ...

 
 

Komentarz zaimportowany z WordPressa