如何通过onClick事件处理函数传递带有参数的函数，并且该函数仍将函数绑定到组件的“ this”上下文？

Question

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."

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

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:

<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?

Answer 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 :

<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).

Answer 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) .