/

使用React建立一個簡單的計數器

使用React建立一個簡單的計數器

在這個短教程中，我們將使用React建立一個非常簡單的計數器的例子，應用之前介紹的許多概念和理論。

讓我們在Codepen上進行這個例子。我們首先從fork一個React template pen開始。

在Codepen中，我們不需要導入React和ReactDOM，因為它們已經在範圍內添加了。

我們將計數顯示在一個div中，並添加幾個按鈕來增加這個計數：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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'))

現在，讓我們通過添加onClickFunction屬性，增加讓我們通過點擊按鈕來改變計數的功能：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
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'))

在這裡，每個Button元素有兩個屬性：increment和onClickFunction。我們創建了4個不同的按鈕，分別對應4個增量值：1、10、100、1000。

當Button組件中的按鈕被點擊時，將調用incrementCount函數。

這個函數必須增加本地的計數。我們如何實現呢？我們可以使用hooks：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
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()將計數變量初始化為0，並提供setCount()方法來更新其值。

我們在incrementCount()方法的實現中都使用了這兩個。

The react counter

完整的範例代碼可以在這裡查看。