React復選框無法正常工作

Question

我有想法向React項目添加一些對象樣式。 這就是為什么我寫那堂課

 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)

}

它的最后一部分是事件處理程序，稍后會詳細介紹。 此類在Parent組件中實現，如下所示

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

請注意，這是在其渲染功能中實現的。 它與狀態無關。 稍后在此父組件中，我將其作為道具發送

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

問題在於復選框不能正確地檢查項目。 我的意思是更改數據（我將數據發送到evenhandler中以進行控制台操作，這樣很清楚），但是它不會檢查字段的預期行為。 我懷疑這是因為在Parent中，Taggs與狀態無關（只是懷疑），這是正確的還是其他原因？ 如果是這樣，我如何輕松地重塑代碼以保持其面向對象的風格？

Answer 1

我剛剛開始了關於“不是國家”的最初想法。 我猜那是不正確的。 現在在構造函數中，Tagg的啟動方式如下：

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

然后在render {return（）}中這樣調用

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

完全不改變任何東西