Ta strona używa ciasteczek (cookies), dzięki którym nasz serwis może działać lepiej. Dowiedz się więcej OK, rozumiem

Problem z konstruktorem (Reactjs)

Tworzenie dynamicznych stron internetowych z zastosowaniem JavaScript, jQuery, Ajax. Dowiedz się jak to zrobić, znajdź rozwiązania swoich problemów.

Problem z konstruktorem (Reactjs)

Post 04.05.2018, 10:54:48

Cześć,
Mam problem z poprawnym napisaniem konstruktora ( prostego, ale nie dla mnie)


Kod: Zaznacz cały
class Filterdevice extends React.Component{
    constructor () {
        super();
        this.state = {
          id: '',
          firstName: '',
          lastName: '',
          dateOfBirth:'',
          company:'',
          note:'',
           };
        this.filter = {
            id: '',
            firstname: '',
            lastName: '',
          dateOfBirth:'',
          company:'',
          note:'',
          };
        this.handleChange = this.handleChange.bind(this);
      }

      handleChange (evt) {

        this.filter.setState({ [evt.target.name]: evt.target.value });

      }


W skrócie chodzi o to, że mam dobrze działającą procedurę obsługi zdarzenia (evt). Ale o ile przy zapisie
this.setState({ [evt.target.name]: evt.target.value }); jest wszystko dobrze, to ja chciałbym aby handleChange przypisywało zwrot ze zdarzenia tylko do wydzielonego obiektu a nie do kilku elementów state. I próbuję ten obiekt (może być i tabela) jakoś w ramach state wyspecyfikować, ale co zrobię to jest błąd. Wypróbowałem już wiele możliwych wariacji rozpisania konstruktora ale nie trafiłem na właściwą (a raczej konstruktora i jednocześnie handleChange). Nie chcę zmieniać wszystkich nazw kluczy w konstruktorze, ogólnie powinienem mieć w state określone klucze i tak samo nazywające się klucze w obiekcie/tablicy filter.Zaczynam działać metodą prób i błędów, więc jeżeli ktoś wie jak to powinno być napisane to prosiłbym o pomoc.
Kiszuriwalilibori
Posty: 11
Dołączył(a): 23.04.2018

Re: Problem z konstruktorem (Reactjs)

Post 05.05.2018, 22:17:46

Wybacz, ale niestety nie rozumiem o co pytasz. Czy mogę prosić o próbę opisania tematu jakoś inaczej?

Jedyne co mogę na temat powyższego kodu napisać, to
Kod: Zaznacz cały
this.filter.setState
nie ma prawa działać. filter to u Ciebie obiekt z kilkoma własnościami (id, firstname, itd.) i nie posiada metody setState. Taka metoda istnieje na instancji React.Component. filter u Ciebie nie jest częścią stanu komponentu, jest zwykłą własnością na komponencie.
Avatar użytkownikakuku
Rafał Kukawski

+∞
+∞

Posty: 19770
Dołączył(a): 14.04.2002

Re: Problem z konstruktorem (Reactjs)

Post 07.05.2018, 12:35:26

Cześć,

Dzięki za odpowiedź, faktycznie kiedy pisałem ten wą tek po raz pierwszy miałem już lekko dość i to nie miało zbytniego sensu. nie mówiąc o tym, że nie było jasne. Napisałem ten temat od początku, konstruktor jest w zasadzie działajacy, ale coś nie gra z obsługą zdarzenia


mam pewien problem z Reactemjs.
Chodzi o przechwytywanie danych ze zdarzenia
Najprościej będzie jak najpierw dam kod, który działa:

Kod: Zaznacz cały
this.state= {staff: this.props.initialStaffTable,
         nonFilteredStaff:this.props.initialStaffTable,
         filter:{firstName:'test'},
         staffPerPage : 5,
         currentPage : 1,
         columnSortBy :null,
         isSortDescending: false,
         isFilterVisible: false,
         filter_id: '',
         filter_firstName: '',
         filter_lastName: '',
         filter_dateOfBirth:'',
         filter_company:'',
         filter_note:'',
        };

   
.......

 handleChange (evt) {this.setState({ ['filter_'+ evt.target.name]: evt.target.value });}




Na górze jest konstruktor a na dole funkcja przejmująca zdarzenia z formularza input. I to działa. Poprawnie zapisany jest również w konstruktorze obiekt filter:{firstName:'test'} (sprawdzone przez console.log w bloku render).
Ponieważ chciałem aby kod był zapisany bardziej poprawnie, zamiast kilku właściwości filter_coś tam chciałbym mieć jeden obiekt z odpowiednimi polami. I tu zaczęły sie schody.

Kod: Zaznacz cały
this.state= {staff: this.props.initialStaffTable,
         nonFilteredStaff:this.props.initialStaffTable,

         filter:{id:'', firstName:'', lastName:'', dateOfBirth:'', company:'',note:''},
         staffPerPage : 5,
         currentPage : 1,
         columnSortBy :null,
         isSortDescending: false,
         isFilterVisible: false,
         filter_id: '',
         filter_firstName: '',
         filter_lastName: '',
         filter_dateOfBirth:'',
         filter_company:'',
         filter_note:'',
        };

..............

 handleChange (evt) {this.setState({ ['filter.'+ evt.target.name]: evt.target.value });
console.log('ths.statefilterform event '+this.state.filter);


bo tak nie działa, co widzę po tym, że console.log produkuje komunikat jak niżej (oraz po odwołaniach jeszcze dalej)

Kod: Zaznacz cały
ths.statefilterform event [object Object]

Czyli nic się nie przypisuje :/

Co zrobiłem nie tak?
Kiszuriwalilibori
Posty: 11
Dołączył(a): 23.04.2018

Re: Problem z konstruktorem (Reactjs)

Post 07.05.2018, 14:04:35

Jesli dobrze zrozumiałem, to

Kod: Zaznacz cały
this.setState({
    filter: {
        ...this.state.filter,
        [evt.target.name] : evt.target.value
    }
});

Jeśli object spread nie wchodzi w grę, to możesz uzyć Object.assign

Kod: Zaznacz cały
this.setState({
    filter: Object.assign({}, this.state.filter, { [evt.target.name]: evt.target.value })
});
Avatar użytkownikakuku
Rafał Kukawski

+∞
+∞

Posty: 19770
Dołączył(a): 14.04.2002


Powrót do JavaScript


 


  • Podobne wątki
    Odpowiedzi
    Wyświetlone
    Ostatni post

Kto przegląda forum

Użytkownicy przeglądający ten dział: Brak zidentyfikowanych użytkowników i 3 gości

Hosting, Domeny, SSL

Subskrypcja

Mamy 51510 zarejestrowanych użytkowników.
Najnowszy użytkownik: Steeveroutt


Nasi użytkownicy napisali:

  • 937837 wiadomości
  • w 247508 tematach

Najnowsze wpisy na blogu

Najnowsze artykuły

Najaktywniejsi (ostatnie 30 dni)