React: przejmowanie danych ze zdarzenia

0

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

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.

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

ths.statefilterform event [object Object]

Czyli nic się nie przypisuje :/

Co zrobiłem nie tak?

0

Gdzie wyczytałeś, że setState obsługuje notację z kropką?
Czy może zgadujesz, zamiast sprawdzić? :-)

https://stackoverflow.com/questions/43040721/how-to-update-a-nested-state-in-react

0
  1. console.log wypluł poprawną informację, czyli [object Object]. Rzeczywiście zapewne jest tam jakiś object. W chromie możesz rozwinąć jego atrybuty.

  2. Nie jestem przekonany czy zapis w postaci ['filter.'+ evt.target.name] jest tym czego chcesz. Wydaje mi się, że bardziej chodziło ci o coś w tym stylu:

this.setState({
    ...this.state, filter: {
        ...this.state.filter, firstName: 'abc'
    }
});
0
Błękitny Programista napisał(a):
  1. console.log wypluł poprawną informację, czyli [object Object]. Rzeczywiście zapewne jest tam jakiś object. W chromie możesz rozwinąć jego atrybuty.

  2. Nie jestem przekonany czy zapis w postaci ['filter.'+ evt.target.name] jest tym czego chcesz. Wydaje mi się, że bardziej chodziło ci o coś w tym stylu:

this.setState({
    ...this.state, filter: {
        ...this.state.filter, firstName: 'abc'
    }
});

Widzisz, nie bardzo mogę ten obiekt rozwinąć fakt, w FF, ale tak czy owak w konsoli - po prostu nie proponuje rozwinięcia przez ten znaczek, który normalnie rozwija zwinięte struktury :/
A co do 2 to zauważ, że w pierwszym przypadku - kiedy w ramach obiektu state mam bezpośrednio pola filter_x w obsłudze zdarzenia mam literał filter_ i to działa. Konstrukcja z +evt.target.name bardzo ładnie łączyła zawartość pola nazwy(krótko mówiąc, ta zawartość jest taka jaka powinna być z przedrostkiem filter_ i daje działającą nazwę pola obiektu. Toteż pomyślałem, żefilter.x też styknie. I nie za bardzo rozumiem, dlaczego nie styka.

0
Patryk27 napisał(a):

Gdzie wyczytałeś, że setState obsługuje notację z kropką?
Czy może zgadujesz, zamiast sprawdzić? :-)

https://stackoverflow.com/questions/43040721/how-to-update-a-nested-state-in-react

Przyznaję - zgaduję - a właściwie nie tyle zgaduję co nie widziałem powodu, żeby nie obsługiwał :/
Dzięki.
Jak to w takim razie zapisać?

Bliski mi jest ten komentarz * this exposes a major flaw of react.instead of creating a shit ton of extra objects in memory, why can't we just do quoted strings for nesting and simply parse and walk the object.its not fucking rocket science and would be so much easier for developers, use less memory and cpu and just make total fucking sense. *

Ok, teraz widzę tam rozpiskę z wytłumaczeniem, dzięki

1 użytkowników online, w tym zalogowanych: 0, gości: 1