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

Question

有一个带有 key 属性和 onClick 事件处理程序的 React 组件。我需要创建一些这样的组件，并将它们的 key 值作为点击事件处理程序的参数。但是如果参数是 value 变量，它在 for 循环迭代后取它的最终值。例如，如果我创建三个组件，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;
}

Answer 1

该箭头函数中的

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

您可以使用 i 而不是 value。因为它是在带有 let 的 for 语句中声明的，所以为每个循环迭代创建一个 *different 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），那将是正确的。

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;

}

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

您可以阅读更多关于 closures and lexical scoping

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

Get component's prop in its event handler in React

javascript

reactjs

react-props