React复选框无法正常工作

Question

I had and idea to ad some object style to React project. That is why I have written that class

 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;

}

get getAllTags() {
    return this.members;
}

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)

}

The last part thereof is event handler, more about it later. That class is implemented in Parent component like this

let Taggs =Tagi.fromTable(d);
console.log (Taggs.getMarkedTags);

Please note that this is implemented in its render function. It has nothing to do with its state. Later in this Parent component I send it as props

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

The problem is that checkbox doesn't react to checking items properly. What I mean by this is that data is changed ( I send to console the data within evenhandler so that is clear) but it does not check the fields what is expected behaviour. I suspect it happens because in Parent, Taggs are not state-linked (but only suspect) Is that correct or could there be other reason? If so, how could I easily reshape the code keeping its object oriented style?

Answer 1

I have just chcecked my initial idea of being-not-a-state. That is not correct I guess. Now in constructor Taggs are initiated like this:

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

and later in render{return()} are called like this

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

Does not change anything at all