Klasa z obsługą zdarzenia

0

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>
)
0

Dzisiaj tytułem rozwiązywania samemu własnych problemów podpiąłem to pod stan (poniżej fragment konstruktora)

 Taggs:Tagi.fromTable(props.disciplines.map((d) => d.tags)),

i stosownie zmieniłem wywołanie Checkboxa

 <CheckBox labels ={this.state.Taggs.getAllTags} fn ={this.state.Taggs.handleTagMarking}/>

Niestety jest jak było

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