时间戳

首页 > 解决方案 > 使用 React 传递参数

javascript - 使用 React 传递参数

问题描述

我有这个 Json 变量：

this.state = {
            groups: [{
                name: '',
                permission: [{
                    name: ''
                }]
            }]
        }

在我的渲染方法上，我有这个：

 render() {

        return (
            <div>
                <div>
                    <HeaderApp />

                    <h3>Choose a group to add permissions:</h3>

                    {this.state.groups.map((groups) => {
                        return (<li key={groups.code}>
                            <Card>
                                <CardBody>
                                    <CardTitle>{groups.name}</CardTitle>
                                    <CardSubtitle>This group has {this.countPermissionPerGroup(groups)} permissions.</CardSubtitle> 
                                    <Button color="secondary" onClick={(groups) => this.onClickShowPermissions(groups)}>Show permissions</Button>    
                                    <Button color="secondary">Add Permission</Button>
                                </CardBody>
                            </Card>
                        </li>)

                    })}


                </div>
            </div>
        );
    }

在 onClick 方法上，我想传递按钮所属的组并获取同一组的所有权限，并使用此方法在我的控制台上打印它：

onClickShowPermissions = (group) => {
    for(var g in group.permission){
        console.log("Test"+g)
    }

}

但是由于某种原因不起作用，我做错了什么？

标签： javascriptreactjs

解决方案

onClick 动作绑定了事件类型。因此，与其尝试直接从 onClick 传递组，不如将其留空，如下所示：

<Button color="secondary" onClick={() => this.onClickShowPermissions(groups)}>Show permissions</Button>

推荐阅读