Získání Syntetických základových Události v konzoli místo, které konkrétní položky

Question 1

Níže je kód. Vždy, když jsem se kliknutím na přidat do košíku, pro každou položku. Vidím upozornění. A Místo toho, aby položky, pokud mám konzoli.přihlaste se něco statického to je také pracovat, ale s bodem. Jsem stále na Syntetické bázi Událostí v konzole

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

Question 2

Zde .bind nedělá to, co si myslíš.

Funkce.prototyp.bind

Na bind() metoda vytvoří novou funkci, která, když volal, má své this klíčové slovo nastavit na poskytované hodnoty, dané pořadí argumentů, předchází jakýkoli dispozici nová funkce se nazývá.

S onClick={clickMe.bind(item)} ty jsou závazné pouze item k this funkce a onClick událost je stále předán jako první argument na zpětné volání.

Pokud se chtějí projít v současné době mapovány item pak to musí být předána jako další argument.

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

Můžete také stačí použít anonymní funkci zpětného volání.

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

Nebo prohlásit, clickMe být na kari funkce a vrátit klepněte na tlačítko popisovač s item uzavřen v callback působnosti.

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

...

onClick={clickMe(item)}

Drew Reese · Answer 1 · 2021-11-24T01:35:33

Zde .bind nedělá to, co si myslíš.

Funkce.prototyp.bind

Na bind() metoda vytvoří novou funkci, která, když volal, má své this klíčové slovo nastavit na poskytované hodnoty, dané pořadí argumentů, předchází jakýkoli dispozici nová funkce se nazývá.

S onClick={clickMe.bind(item)} ty jsou závazné pouze item k this funkce a onClick událost je stále předán jako první argument na zpětné volání.

Pokud se chtějí projít v současné době mapovány item pak to musí být předána jako další argument.

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

Můžete také stačí použít anonymní funkci zpětného volání.

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

Nebo prohlásit, clickMe být na kari funkce a vrátit klepněte na tlačítko popisovač s item uzavřen v callback působnosti.

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

...

onClick={clickMe(item)}

@DrewResse udělal jsem změny, ale z nějakého důvodu , bez kliknutí na cokoliv . Já jsem automaticky dostat upozornění. položky.mapa(item => ( <p>{item.productname} {položku.productprice} {položku.typ} <button onClick={clickMe(položka)}> Přidat do košíku </tlačítko></p> ))
@RitikSingh Vypadá to, že chceš s možností 3, kari funkce. věděli jste chytit, že clickMe je aktualizována tak, aby byla funkce, která vrací funkci? tj. (arg) => () => {}? První funkce je okamžitě vyvolána, takže pokud není návratu další funkce těla, je popraven.

Získání Syntetických základových Události v konzoli místo, které konkrétní položky

Otázka

Nejlepší odpověď

V jiných jazycích

Tato stránka je v jiných jazycích

Populární v této kategorii

Oblíbené položky v této kategorii