创建一组条目时将唯一变量传递给 onClick 函数

Question

我试图在 ReactJS 中为每张卡片发送一个唯一的密钥，这样当我点击它时，我可以使用单词执行一些操作，例如使用 Flask 从数据库中删除条目。如下所示的当前设置仅将元素的最后一个键呈现给所有有意义的卡片，但我找不到另一种方法。

for ( var key in elements) {    
        items.push(
            <Card>
                <CardBody>
                    <CardTitle>
                        {key}
                        <Button className='btn-simple btn-icon btn-round xButton' color='danger' onClick={() => this.NotLearnt(key)}><FontAwesomeIcon icon={faTimes}/></Button>
                    </CardTitle>
                    <CardText className="meaning">{elements[key]}</CardText>
                </CardBody>
            </Card>
        )
    }

基本上，我想要的是，如果我有像 {'a':'A', 'b':'B', 'c':C 这样的字典我希望在单击第一张卡片时传递 'a' 而不是最后一个键 'c'

编辑：正如 Shubham 所回答的，使用 let over var 会减少变量的范围，因此只传递相关值。

Answer 1

这是一个闭包问题，可以通过使用 let 而不是 var 键声明来解决，这使得键的范围被限制在 for 循环块中

for ( let key in elements) {    
    items.push(
        <Card>
            <CardBody>
                <CardTitle>
                    {key}
                    <Button className='btn-simple btn-icon btn-round xButton' color='danger' onClick={() => this.NotLearnt(key)}><FontAwesomeIcon icon={faTimes}/></Button>
                </CardTitle>
                <CardText className="meaning">{elements[key]}</CardText>
            </CardBody>
        </Card>
    )
}

创建一组条目时将唯一变量传递给 onClick 函数

Pass unique variable to the onClick function when creating a set of entries

onclicklistener

reactjs