Question

在用户界面中，我有用于特定操作的复选框。

<input type="checkbox" className="form-check-input" name="Dashboard" 
   value="Read" onChange={this.get_permission.bind(this)}/>
<input type="checkbox" className="form-check-input" name="Dashboard" 
  value="Create" onChange={this.get_permission.bind(this)}/>
<input type="checkbox" className="form-check-input" name="Dashboard" 
 value="Update" onChange={this.get_permission.bind(this)}/><input 
 type="checkbox" className="form-check-input" name="Dashboard" 
value="Delete" onChange={this.get_permission.bind(this)}/>

OnChange函数：

get_permission(event){
    var permissions = this.state.permissions
    if(event.target.checked){
        permissions.push({
            "module_name": event.target.name,
            "permissions": [event.target.value]
        })
    }
    else{
        for(var i=0;i<permissions.length;i++){
            if(permissions[i].module_name == event.target.name){
                if(permissions[i].permissions == event.target.value){
                    permissions.splice(i,1)
                    break
                }
            }
        }
    }
    console.log('permissions',permissions)
    this.setState({permissions : permissions})
}

从上面的代码中，我可以按照以下附件格式发送

但是我需要采用以下格式

Answer 1

当权限已经存在时，您必须更新该权限。您的代码没有这样做

将代码更新为以下内容

function get_permission(event) {
    const permissions = this.state.permissions.splice(); //If ES6 use [...this.state.permissions]
    const permission = permissions.find(item => item.module_name === permission);

    if (event.target.checked) {
        if (permission) {
            permission.permissions.push(event.target.value);
        } else {
            permissions.push({
                "module_name": event.target.name,
                "permissions": [event.target.value]
            })
        }
    }
    else {
        for (let i = 0; i < permission.permissions.length; i++) {
            if (permission.permissions[i] === event.target.value) {
                permission.permissions.splice(i, 1);
                break;
            }
        }
    }
    console.log('permissions', permissions);
}

Answer 2

对不起，我没有足够的声誉来发表评论。但是，我认为您应该优化下面的状态结构。您在结构中使用权限的次数很多。只是误导。

{
    modules: [{
        moduleName: "Dashboard",
        permissions: {
            read: false,
            create: false,
            update: false,
            delete: false
        },
    }]
}

此外，我建议您以反应方式呈现复选框和表格，而不是对元素进行硬编码，还应将函数转换为es6格式。您可以简化很多代码，甚至可能导致更好的性能和对代码的更好理解。

如何将元素推入数组？

2 个答案: