Tạo một bộ đếm đơn giản với React

Một ví dụ rất đơn giản về việc xây dựng bộ đếm trong React

Trong hướng dẫn ngắn này, chúng tôi sẽ xây dựng một ví dụ rất đơn giản về bộ đếm trong React, áp dụng nhiều khái niệm và lý thuyết đã nêu trước đó.

Hãy sử dụng Codepen cho việc này. Chúng tôi bắt đầu bằng cách rènBút viết mẫu React.

Trong Codepen, chúng ta không cần nhập React và ReactDOM vì chúng đã được thêm vào phạm vi.

Chúng tôi hiển thị số lượng trong một div và chúng tôi thêm một vài nút để tăng số lượng này:

const Button = ({ increment }) => {
  return <button>+{increment}</button>
}

const App = () => { let count = 0

return ( <div> <Button increment={1} /> <Button increment={10} /> <Button increment={100} /> <Button increment={1000} /> <span>{count}</span> </div> ) }

ReactDOM.render(<App />, document.getElementById(‘app’))

Hãy thêm chức năng cho phép chúng tôi thay đổi số lượng bằng cách nhấp vào các nút, bằng cách thêmonClickFunctionchống đỡ:

const Button = ({ increment, onClickFunction }) => {
  const handleClick = () => {
    onClickFunction(increment)
  }
  return <button onClick={handleClick}>+{increment}</button>
}

const App = () => { let count = 0

const incrementCount = increment => { //TODO }

return ( <div> <Button increment={1} onClickFunction={incrementCount} /> <Button increment={10} onClickFunction={incrementCount} /> <Button increment={100} onClickFunction={incrementCount} /> <Button increment={1000} onClickFunction={incrementCount} /> <span>{count}</span> </div> ) }

ReactDOM.render(<App />, document.getElementById(‘app’))

Ở đây, mỗi phần tử Nút có 2 đạo cụ:incrementonClickFunction. Chúng tôi tạo 4 nút khác nhau, với 4 giá trị gia tăng: 1, 10 100, 1000.

Khi nút trong thành phần Nút được nhấp,incrementCounthàm được gọi.

Hàm này phải tăng số lượng cục bộ. Làm thế nào chúng ta có thể làm như vậy? Chúng ta có thể sử dụng các móc:

const { useState } = React

const Button = ({ increment, onClickFunction }) => { const handleClick = () => { onClickFunction(increment) } return <button onClick={handleClick}>+{increment}</button> }

const App = () => { const [count, setCount] = useState(0)

const incrementCount = increment => { setCount(count + increment) }

return ( <div> <Button increment={1} onClickFunction={incrementCount} /> <Button increment={10} onClickFunction={incrementCount} /> <Button increment={100} onClickFunction={incrementCount} /> <Button increment={1000} onClickFunction={incrementCount} /> <span>{count}</span> </div> ) }

ReactDOM.render(<App />, document.getElementById(‘app’))

useState()khởi tạo biến đếm ở 0 và cung cấp cho chúng tôisetCount()để cập nhật giá trị của nó.

Chúng tôi sử dụng cả hai trongincrementCount()triển khai phương thức, gọisetCount()cập nhật giá trị thành giá trị hiện có củacount, cộng với gia số được chuyển qua bởi mỗi thành phần Nút.

The react counter

Bạn có thể xem mã ví dụ đầy đủ tạihttps://codepen.io/flaviocopes/pen/QzEQPR

Tải xuống miễn phí của tôiSổ tay React


Các hướng dẫn về phản ứng khác: