在 React 的事件处理程序中获取组件的 prop

Question

有一个带有key prop 和onClick事件处理程序的 React 组件。 我需要创建一些这些组件并将它们的key作为 click 事件处理程序的参数。 但是如果参数是value变量，它会在 for 循环的迭代之后取其最终值。 例如，如果我创建三个组件， handleClick function 从每个组件中获取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;
}

Answer 1

箭头 function 中的this将引用渲染 this 的组件，而不是您正在渲染的Component实例。

代替value ，您可以使用i 。 由于它是在for语句中用let声明的，因此为每个循环迭代创建一个 *不同的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声明的，因此它是为每次迭代创建的块 scope 的本地（就像i一样）。 如果您也使用let （但不是var ），那将是正确的。

Answer 2

你有一个范围问题。 handleClick() 引用在执行时为 n - 1 的值（for 循环的上限）。 你需要的是让handleClick() 引用一个块级变量，比如i 或者在handleClick() 中引入另一个闭包。

 createComponents(n) {
    let value = 0; // do  not use this, all handleclicks will reference last set value
    let list = [];
    for (let i = 0; i < n; i++) {
          list.push(
            <Component
              key={i}
              onClick={() => {
                handleClick(i);
              }}
            />
          );
        }
    return list;

}

使用上面的代码，您将实现与i相同的value更改。

你可以阅读更多关于闭包和词法作用域的信息