Передайте уникальную переменную в функцию onClick при создании набора записей - PullRequest
Новая
       65

Передайте уникальную переменную в функцию onClick при создании набора записей

0 голосов
/ 09 мая 2020

Я пытаюсь отправить уникальный ключ в 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', которое - последний ключ.

РЕДАКТИРОВАТЬ: Как ответил Шубхэм, использование let over var уменьшает область действия переменной, и, следовательно, передается только соответствующее значение.

1 Ответ

0 голосов
/ 09 мая 2020

Это проблема закрытия, которую можно исправить, используя let вместо var для объявления ключа, что ограничивает область действия ключа блоком for l oop 

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