简体   繁体   English

如何将元素推入数组?

[英]How to push the elements into array?

在此处输入图片说明

In the UI i am having checkboxes for particular operation. 在用户界面中,我有用于特定操作的复选框。

<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 function: 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})
}

From the above code I can able to sent in the below attached format 从上面的代码中,我可以按照以下附件格式发送 在此处输入图片说明

But I need to pass in the below format 但是我需要通过以下格式

在此处输入图片说明

When the permission is already existing, you have to update the permissions for that . 当权限已经存在时,您必须更新该权限。 your code is not doing that 您的代码没有这样做

Update your code to the following 将您的代码更新为以下内容

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

Sorry, I don't have enough reputation to comment. 抱歉,我没有足够的声誉来发表评论。 But, I think you should optimize your state structure to the below. 但是,我认为您应该优化下面的状态结构。 You're using permissions so many times in the structure. 您在结构中使用权限的次数很多。 It's just misleading. 这只是误导。

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

Also, I'd advise you to render checkboxes and the table the react way instead of hardcoding the elements and also convert your functions to es6 format. 另外,我建议您以反应方式呈现复选框和表格,而不是对元素进行硬编码,并且还将函数转换为es6格式。 You can simplify your code a lot and it might even result in better performance and better understanding of the code. 您可以简化很多代码,甚至可能导致更好的性能和对代码的更好理解。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM