Quartz 🪬

Search

SearchSearch

React Event Handlers

Nov 21, 20242 min read

Để handle các event trong React, chúng ta cần tạo ra các event handler và gán chúng cho các thuộc tính sự kiện.

Adding Event Handlers

Ta thêm vào event handler thông qua thuộc tính sự kiện như sau:

function App() {
    return (
	    <button onClick={() => alert('Hello world')}>
		    Click me
	    </button>
    )
}

Có thể tách event handler ra làm một hàm riêng:

function App() {
    const handleClick = () => {
        alert('Hello world')
    }
 
    return <button onClick={handleClick}>Click me</button>
}

Tip

Nên đặt tên event handler bắt đầu bằng tiền tố handle.

Nếu ta gọi thực thi event handler khi truyền vào thuộc tính sự kiện, event handler đó sẽ được thực thi mỗi lần component được render thay vì khi có sự kiện xảy ra:

// This alert fires when the component renders, not when clicked!
<button onClick={alert('You clicked me!')}>

Note

Chú ý rằng tên của các sự kiện built-in ở trong React là camelCase. Chẳng hạn với JS là onclick thì ở React sẽ là onClick.

Propagation

Tất cả các sự kiện ở trong React đều được lan truyền, trừ onScroll.

Ví dụ, khi click vào một trong hai button bên dưới thì ta sẽ thấy hai thông báo được hiện ra: thông báo của <button> và thông báo của thẻ <div>:

function Toolbar() {
    return (
        <div onClick={() => alert('You clicked on the toolbar!')}>
            <button onClick={() => alert('Playing!')}>
	            Play Movie
			</button>
            <button onClick={() => alert('Uploading!')}>
	            Upload Image
            </button>
        </div>
    )
}

Chúng ta có thể ngăn chặn sự lan truyền tương tự như khi xử lý JS Event:

function Toolbar() {
    const handleButtonClick = (e, message) => {
        e.stopPropagation()
        alert(message)
    }
 
    return (
        <div onClick={() => alert('You clicked on the toolbar!')}>
            <button onClick={(e) => handleButtonClick(e, 'Playing!')}>
                Play Movie
            </button>
            <button onClick={(e) => handleButtonClick(e, 'Uploading!')}>
                Upload Image
            </button>
        </div>
    )
}

Preventing Default Behaviour

Đối với JS event, chúng ta có thể return false để ngăn chặn hành vi mặc định của sự kiện như sau:

<form>
	<button onclick="alert('Hello world') return false">Click me</button>
</form>

Tuy nhiên, đối với React event, chúng ta cần thực hiện ngăn chặn hành vi mặc định một cách tường minh:

function App() {
    const greeting = (e) => {
        e.preventDefault()
        alert('Hello world')
    }
 
    return (
        <form>
            <button onClick={greeting}>Click me</button>
        </form>
    )
}
list
from [[React Event Handlers]]
sort file.ctime asc

Resources

Backlinks