Zdefiniowałam sobie taką klasę (pokażę tylko początek i koniec aby nie zaciemniać)
export class Tagi {
constructor() {
this.members = [{```
tag: 'No matter',
color: 'Aquamarine',
isMarked: true
}];
this.handleTagMarking = this.handleTagMarking.bind(this);
}
add(x) {
this.members.push(x);
}
static fromTable(table) {
let tags = new Tagi;
let shortened = unique(table);
for (let value of shortened) {
let record = {
tag: value,
color: colors[shortened.indexOf(value)],
isMarked: false
}
tags.add(record)
}
return tags;
}
....dużo kodu.....
handleTagMarking(event){
let x = event.target.value;
const index = this.members.findIndex((element)=>element.tag==x);
const currentMarkStatus = this.members[index].isMarked;
if (currentMarkStatus) this.UnMarkTag(index); else this.MarkTag(index)
** console.log( this.members)**
Na końcu jest handler zdarzeń o którym za chwilę więcej. Rzeczona klasa jest importowana z pliku zewnętrznego do pliku Rodzic.
W tym pliku Rodzic pojawia się dopiero w funkcji render
let d= this.props.disciplines.map((d) => d.tags)
let Taggs =Tagi.fromTable(d);
d.tags to ogólnie przetworzone propsy Rodzica
No i chodzi o to, że o ile wstawiając console. log do handlera, widzę że zawartość się zmienia (konkretnie this.members, czyli dane w obrębie obiektu tej klasy)
to już nie zmienia sie nic w Taggs ( co sprawdzam po pierwsze console.logiem zaraz za Taggs, po drugie obserwując chceckbox do którego Taggs ostatecznie trafia w nieco przetworzonej formie. Dlaczego tak się dzieje?
Podejrzewam ale tylko podejrzewam, że w jakiś sposób rodzic się każdorazowo (to jest po zaznaczeniu checkboxa -ale ten Chckbox jest w potomku! )przerenderowywuje od początku i obiekt Taggs zawsze wraca do stanu początkowego. Jak to sprawdzić i zmienić?
Nie chciałabym wiązać Taggs do State ale jeżeli nie ma innej opcji to napiszcie jak, a ja to zrobię.
A tak wygląda Checkbox i kawałek kodu dookoła
render() {
const label = this.props.labels;
const SingleCheckbox =()=>{return(label.map((element)=>
<label key={element.tag} ><input type="checkbox" value={element.tag} checked={element.isMarked} onChange={this.props.fn} />{element.tag}</label>))}
return (
<div className="checkbox">
<SingleCheckbox />
</div>
)