如何向onClick事件处理程序传递一个带参数的函数，并且仍然将该函数绑定到组件的“this”上下文？

Question

我有一个基于类的React组件，称为“AllProducts.jsx”，我这样定义了“class AllProducts扩展组件”，所以当我将函数传递给onClick事件处理程序时，我需要绑定“this”的上下文，但是当我尝试将这些函数之一传递给一个参数时，我在控制台中得到一个错误，说“无法读取未定义的属性绑定”。

这是代码抛出错误时的样子，请查看i标记的onClick处理程序：

renderProductInfo() {

    return this.props.allProducts.map((product) => {
        return [
            <li id="shownName">{product.name}</li>,
            <li id="shownSKU">{product._id}</li>,
            <li id="shownCategory">{product.category}</li>,
            <li id="shownPrice">${product.price}</li>,
            <li id="shownQuantity">{product.quantity}</li>,
            <i onClick={this.handleEditProduct(product._id).bind(this)} 
               id="shownEdit" className="fi-pencil"></i>,
            <br />
        ];
    });

}

我通过在onClick处理程序中定义函数来解决这个问题，如下所示：

<i onClick={() => {
                    this.props.fetchSingleProduct(product._id).then(() => {
                        var opposite = !this.state.editProduct;

                        this.setState({
                            editProduct: opposite
                        });
                    });
                }} 
                   id="shownEdit" className="fi-pencil"></i>

有没有办法让我直接传入参数并避免错误？

Answer 1

这是在调用函数，这会导致错误：

onClick={this.handleEditProduct(product._id).bind(this)}

这是将函数与参数绑定，这就是您想要的：

onClick={this.handleEditProduct.bind(this, product._id)}

请注意，handleEditProducts的函数签名应该是（productId， event）。

Answer 2

以下是通常使用箭头函数传递参数的方式：

<i onClick={() => this.handleEditProduct(product._id)} id="shownEdit" className="fi-pencil"></i>

此外，这也是使用< code >的方式。绑定:

<i onClick={this.handleEditProduct.bind(this, product._id)} id="shownEdit" className="fi-pencil"></i>

你需要打电话给<代码>。bind在函数上，而不是函数调用的返回值上。所以任何参数都会跟在上下文后面(第一个参数)。