Получить свойство компонента в его обработчике событий в React - PullRequest
Новая
       2

Получить свойство компонента в его обработчике событий в React

1 голос
/ 20 июня 2020

Существует компонент React с обработчиком событий key и onClick. Мне нужно создать некоторое количество этих компонентов и указать их значение key в качестве аргумента для обработчика событий щелчка. Но если аргумент - это переменная value, она принимает свое окончательное значение после итераций для l oop. Например, если я создаю три компонента, функция handleClick получает value = 3 из каждого компонента, но это должно быть 1 из первого компонента, 2 из второго и т. Д. 

createComponents(n) {
    let value = 0;
    let list = [];
    for (let i = 0; i < n; i++) {
        list.push(
            <Component
            key={value}
            onClick={() => {
                handleClick(value);
            }}
            />
        );
        value += 1;
    }
    return list;
}

Ответы [ 2 ]

1 голос
/ 20 июня 2020

У вас проблема с определением объема. handleClick () ссылается на значение, которое на момент выполнения равно n - 1 (верхний предел для l oop). вам нужно сделать так, чтобы handleClick () ссылался на переменную уровня блока, например i, или вводил другое закрытие в handleClick (). как i.

Подробнее о закрытии и лексической области видимости

1 голос
/ 20 июня 2020

this внутри этой стрелочной функции будет относиться к компоненту, отображающему это, а не к экземпляру Component, который вы визуализируете.

Вместо value вы можете использовать i. Поскольку он объявлен в операторе for с let, для каждой l oop итерации создается * другое i (да, действительно). Итак: 

createComponents(n) {
    let list = [];
    for (let i = 0; i < n; i++) {
        list.push(
            <Component
                key={i}
                onClick={() => {
                  handleClick(i);
                }}
            />
        );
    }
    return list;
}

Если по какой-то причине value и i не такие же, как в вашем вопросе, вы можете использовать локальную константу (или переменную) в блоке for для захвата значения value: 

createComponents(n) {
    let value = 0;
    let list = [];
    for (let i = 0; i < n; i++) {
        const thisValue = value;
        list.push(
            <Component
                key={thisValue}
                onClick={() => {
                  handleClick(thisValue);
                }}
            />
        );
        ++value;
    }
    return list;
}

Поскольку это объявлено с const, оно локально для области блока, созданной для каждой итерации (просто как i). Это было бы верно, если бы вы использовали let (но не var).

...