React: przejmowanie danych ze zdarzenia

React: przejmowanie danych ze zdarzenia
KI
  • Rejestracja:około 7 lat
  • Ostatnio:ponad 2 lata
  • Postów:81
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:

Kopiuj
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.

Kopiuj
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

Kopiuj
ths.statefilterform event [object Object]

Czyli nic się nie przypisuje :/

Co zrobiłem nie tak?

edytowany 1x, ostatnio: Kiszuriwalilibori
Patryk27
Moderator
  • Rejestracja:ponad 17 lat
  • Ostatnio:prawie 2 lata
  • Lokalizacja:Wrocław
  • Postów:13042
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


edytowany 1x, ostatnio: Patryk27
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:

Kopiuj
this.setState({
    ...this.state, filter: {
        ...this.state.filter, firstName: 'abc'
    }
});
KI
  • Rejestracja:około 7 lat
  • Ostatnio:ponad 2 lata
  • Postów:81
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:

Kopiuj
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.

edytowany 5x, ostatnio: Kiszuriwalilibori
KI
  • Rejestracja:około 7 lat
  • Ostatnio:ponad 2 lata
  • Postów:81
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

edytowany 5x, ostatnio: Kiszuriwalilibori

Zarejestruj się i dołącz do największej społeczności programistów w Polsce.

Otrzymaj wsparcie, dziel się wiedzą i rozwijaj swoje umiejętności z najlepszymi.