Hướng dẫn how to pass two parameters in onclick function in html - cách truyền hai tham số trong hàm onclick trong html

Trong khi tất cả những người làm việc trong một dự án phát triển web trong quá khứ đã phải đối phó với sự kiện

onclick="myfunction(p1, p2)"

Trong bài viết dựa trên ví dụ này, tôi muốn nhanh chóng bao gồm các cách khác nhau để gửi nhiều tham số đến chức năng xử lý sự kiện của bạn mà không phải bán linh hồn của bạn cho Satan.

Ví dụ sử dụng trường hợp

Hãy cùng xem nhanh một trường hợp sử dụng giả để chúng tôi tất cả trên cùng một trang. Giả vờ bạn có một danh sách các mục trên giỏ hàng giả, mỗi mục có nhiều thuộc tính và khi nhấp vào một trong các nút, bạn cần xóa nó khỏi giỏ hàng. Tuy nhiên, vấn đề là việc xóa nó không phải là tầm thường. Trước khi bạn đưa nó ra khỏi danh sách, trước tiên bạn cần:

• Hãy chắc chắn rằng nó đã ở bên trong xe đẩy lâu hơn một giờ. Nếu có, khách hàng có thể loại bỏ nó. Tôi biết, quy tắc điên rồ, nhưng đây là một trường hợp sử dụng giả, vì vậy hãy để có một số niềm vui, phải không?
• Cập nhật bộ đếm danh mục để đảm bảo tổng số tiền là chính xác.

Chỉ sau đó, nếu mọi thứ đều ổn, chúng ta có thể tiến hành xóa mục khỏi danh sách.

Và đây là mã có liên quan mà chúng tôi sẽ làm việc với:

import { useState } from "react"

const fakeItems = [
    {name: "Ergo keyboard", price: 200, pictureUrl: "https://images.squarespace-cdn.com/content/v1/5a8723cb7131a5121206d464/1625810188933-U8XTJAMWR8A0MJDJ32QA/lain_top.jpg?format=2500w",  id: 1, category: 1, timeAdded: new Date() },
    {name: "Smallice PCB", price: 120, pictureUrl: "https://images.squarespace-cdn.com/content/v1/5a8723cb7131a5121206d464/1617681008502-BJJPF8TRPN6LNTMUBROR/idi7pnppq0d61.jpg?format=2500w",  id: 2, category: 2, timeAdded: new Date() },
    {name: "Smallice Acrylic Case", price: 400, pictureUrl: "https://images.squarespace-cdn.com/content/v1/5a8723cb7131a5121206d464/1623041004115-JPO9UY3R357ZTPUAWM2D/PXL_20210601_203954893.PORTRAIT_2.jpg?format=2500w", id: 3, category: 3, timeAdded: new Date()},
    {name: "Fourier", price: 320, pictureUrl: "https://images.squarespace-cdn.com/content/v1/5a8723cb7131a5121206d464/1606189295901-T565PVE49OZXN9QK82LD/_RO_5289.jpg?format=2500w", id: 4, category: 4, timeAdded: new Date() }
];

export default function ShoppingCart() {

    const [items, setItems] = useState(fakeItems)

    async function updateCategory() {
        //the code required to check the category goes here...
    }

    function checkTime() {
        //the time-checking logic goes here....
    }

    async function removeItem(id) {
        //right this this logic is missing the category id
        //and the time of insertion into the cart

        let categoryUpdate =  await updateCategory()
        let timeCheck = checkTime()

        if(!categoryUpdate) {
            return console.log("Error, category was not updated")
        }

        if(!timeCheck) {
            return console.log("Error, item has been inside your cart for too long, now you gotta buy it")
        }


        let newItems = items.filter( i => i.id != id)
        setItems(newItems)
    }

    return (
        <ul className="shopping-list">
            {items.map( i => {
                return (<li key={i.id} className="shopping-list-item">
                            <img src={i.pictureUrl} />
                         <br /> {i.name} <span className="price">(USD {i.price})</span>
                        &nbsp; <a onClick={ () => removeItem(i.id)})
                        }} href="#">[Remove]</a>
                    </li>)
            })}
        </ul>
    )
}

Mã từ phía trên sẽ hiển thị một cái gì đó như hiển thị trên hình ảnh sau:

Được cấp, nó không có nghĩa là một giỏ hàng đẹp, nhưng nó là một danh sách các mặt hàng mà bạn có thể loại bỏ dựa trên các điều kiện nhất định. Điều đó sẽ làm. Lưu ý rằng logic để cập nhật danh mục và kiểm tra thời gian không được thực hiện. Điều đó không liên quan ngay bây giờ, vì vậy chỉ cần cho rằng nó hoạt động và chúng tôi sẽ đối phó với logic xung quanh thay thế.

Như đã nói, điều đầu tiên cần lưu ý từ mã, là trình xử lý

onclick="myfunction(p1, p2)"

onclick="myfunction(p1, p2)"

onclick="myfunction(p1, p2)"

#1. Sử dụng hàm mũi tên nội tuyến

Theo ví dụ từ trên cao, một cách rất đơn giản để chuyển nhiều thuộc tính cho trình xử lý của bạn, là gọi trình xử lý từ trong một hàm mũi tên nội tuyến.

    async function removeItem(id, catId, timeAdded) {
        //right this this logic is missing the category id
        //and the time of insertion into the cart

        let categoryUpdate =  await updateCategory(catId)
        let timeCheck = checkTime(timeAdded)

        if(!categoryUpdate) {
            return console.log("Error, category was not updated")
        }

        if(!timeCheck) {
            return console.log("Error, item has been inside your cart for too long, now you gotta buy it")
        }


        let newItems = items.filter( i => i.id != id)
        setItems(newItems)
    }

    return (
        <ul className="shopping-list">
            {items.map( i => {
                return (<li key={i.id} className="shopping-list-item">
                            <img src={i.pictureUrl} />
                         <br /> {i.name} <span className="price">(USD {i.price})</span>
                        &nbsp; 
                        <a onClick={ 
                            () => {
                                e.preventDefault(); 
                                removeItem(i.id, i.category, i.timeAdded)
                            }
                        }} href="#">[Remove]</a>
                    </li>)
            })}
        </ul>
    )

Mã được thêm vào dòng

onclick="myfunction(p1, p2)"

onclick="myfunction(p1, p2)"

onclick="myfunction(p1, p2)"

#2. Sử dụng móc onclick="myfunction(p1, p2)" 8

Móc

onclick="myfunction(p1, p2)"

export default function ShoppingCart() {

    //rest of the component's logic goes here...
    
    const removeHandler = useCallback( (id, catId, timeAdded) => {
       return async (e) => {
        e.preventDefault() //we can all this directly here now!
        let categoryUpdate =  await updateCategory(catId)
        let timeCheck = checkTime(timeAdded)

        if(!categoryUpdate) {
            return console.log("Error, category was not updated")
        }

        if(!timeCheck) {
            return console.log("Error, item has been inside your cart for too long, now you gotta buy it")
        }

        let newItems = items.filter( i => i.id != id)
        setItems(newItems)
       } 

    }, [items])

    return (
        <ul className="shopping-list">
            {items.map( i => {
                return (<li key={i.id} className="shopping-list-item">
                            <img src={i.pictureUrl} />
                         <br /> {i.name} <span className="price">(USD {i.price})</span>
                        &nbsp; 
                        <a onClick={ removeHandler(i.id, i.category, i.timeAdded) } href="#">
                            [Remove]
                        </a>
                    </li>)
            })}
        </ul>
    )
}

Mã với cái móc này trông sạch hơn một chút. Để bắt đầu, chúng tôi gọi một hàm trực tiếp trên trình xử lý

onclick="myfunction(p1, p2)"

onclick="myfunction(p1, p2)"

Đây là một sự thay thế tốt hơn vì chúng tôi đã trừu tượng hóa việc tạo chức năng xử lý và cách nó nên tương tác với sự kiện. Tuy nhiên, chúng tôi có thể làm sạch mã của mình hơn một chút, bằng cách tận dụng các thuộc tính dữ liệu của HTML. Vì vậy, hãy để một cái nhìn.

Phát lại phiên nguồn mở

OpenReplay là một bộ phát lại phiên, phần mở cho phép bạn xem người dùng làm gì trên ứng dụng web của bạn, giúp bạn khắc phục sự cố nhanh hơn. OpenReplay tự lưu trữ để kiểm soát toàn bộ dữ liệu của bạn.

Bắt đầu tận hưởng trải nghiệm gỡ lỗi của bạn - bắt đầu sử dụng OpenReplay miễn phí.

#3. Sử dụng các thuộc tính dữ liệu

Các thuộc tính dữ liệu là các thuộc tính tùy chỉnh bạn có thể thêm vào HTML của mình và theo mặc định, sẽ bị bỏ qua hoàn toàn bởi trình duyệt, tuy nhiên bạn có thể sử dụng chúng và truy cập chúng thông qua JavaScript. Vấn đề là bạn có thể nhúng các thuộc tính của một mục giỏ hàng vào HTML thực tế của phần tử thay vì phải truyền trực tiếp bằng mã. Nó là một cách gọn gàng để giữ cho HTML càng sạch sẽ nhất có thể. Đây là cách nó sẽ trông như thế nào:

onclick="myfunction(p1, p2)"

Bây giờ hãy nhìn vào HTML của liên kết, bạn có thể thấy 3 thuộc tính

myfunction(p1, p2) {
  //do your stuff

}

onclick="myfunction(p1, p2)"

myfunction(p1, p2) {
  //do your stuff

}

Kết quả là một HTML sạch hơn nhiều, logic đơn giản hóa và tổng thể một mã không chỉ hoạt động, mà còn dễ đọc và hiểu dễ dàng hơn rất nhiều.

Cuối cùng, cách bạn viết mã chỉ quan trọng với bạn và nhóm của bạn. Không có một cách nào để chuyển nhiều thuộc tính cho trình xử lý

onclick="myfunction(p1, p2)"

Nếu bạn đã xoay sở để giải quyết vấn đề này theo một cách khác, hãy theo dõi tôi trên Twitter tại @deleteman123 và chia sẻ giải pháp của bạn.