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)

}

最后一部分是事件处理程序，稍后会详细介绍。此类是在父组件中实现的，例如

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}/>

完全不更改任何内容

React复选框无法正常工作

1 个答案: