在控制台中获取合成基础事件而不是该特定项目

Question

下面是代码。每当我点击添加到购物车时，对于每件商品。我可以看到一个警报。而不是 item if I console.log something static 它也可以工作但是与 item.我在控制台

中收到合成基础事件

function Product() {
    useEffect (() => {
        fetchItems();
    },[]);

    const [items, setItems] = useState([]);

    const fetchItems = async() => {
        const data = await fetch('/product',{
            method: "GET",
            headers: {
                Accept: "application/json",
                "Content-Type": "application/json"
            },
            credentials: "include"
        });
        const items = await data.json();
        setItems(items);
    };

    const clickMe = (item) => {
        alert("Working");
        console.log(item);
    };

    return (
        <div>
            <h1>Product Page</h1>

            {
                items.map(item => (
                    <p>{item.productname} {item.productprice}  {item.type} <a onClick={clickMe.bind(item)}>add to cart</a> </p>
                ))
            }

        </div>
    )
}

export default Product

Answer 1

此处 .bind 与您认为的不同。

Function.prototype.bind

bind() 方法创建一个新函数，在调用时将其 this 关键字设置为提供的值，并在调用新函数时在任何提供的参数之前使用给定的参数序列.

使用 onClick={clickMe.bind(item)} 时，您仅将 item 绑定到函数的 this 并且 onClick 事件仍作为第一个参数传递给回调。

如果您想传递当前映射的 item，则需要将其作为附加参数传递。

onClick={clickMe.bind(null, item)}

您也可以只使用匿名回调函数。

onClick={() => clickMe(item)}

或者将 clickMe 声明为柯里化函数，并且 return 带有 item 的点击处理程序在回调范围内关闭。

const clickMe = (item) => () => {
    alert("Working");
    console.log(item);
};

...

onClick={clickMe(item)}

在控制台中获取合成基础事件而不是该特定项目

Getting Synthetic Base Event in console instead of that particular item

javascript

reactjs

react-hooks

react-functional-component