[英]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.