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

I have a class based React component called "AllProducts.jsx" that I defined like this "class AllProducts extends Component" so when I pass functions to onClick event handlers, I need to bind the context of "this", but when I try to pass one of these functions a parameter, I get an error in the console that says "cannot read property bind of undefined."

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

This is what the code looks like when it throws an error, please look at the i tag's onClick handler:

这是代码在抛出错误时的样子,请查看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 />
        ];
    });

}

I worked around this issue by defining the function right inside the onClick handler like this:

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

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

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

Is there a way for me to just directly pass in the parameter and avoid the error?

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

2 个解决方案

#1

Here's how you normally pass parameters using an arrow function:

以下是使用箭头函数正常传递参数的方法:

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

Also, this is how you would do it with .bind:

另外,这是你用.bind做的方法:

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

You need to call .bind on the function, not the return value of the function call. So any parameters would go after the context (first param).

您需要在函数上调用.bind,而不是函数调用的返回值。所以任何参数都会在上下文之后(第一个参数)。

#2

This is calling the function, which leads to an error:

这是调用函数,这会导致错误:

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

This is binding the function with a parameter, which is what you want:

这是将函数与参数绑定,这是您想要的:

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

Note that the function signature for handleEditProduct should be (productId, event).

请注意,handleEditProduct的函数签名应为(productId,event)。

#1