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

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

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

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

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屬性,增加讓我們通過點擊按鈕來改變計數的功能:

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元素有兩個屬性:incrementonClickFunction。我們創建了4個不同的按鈕,分別對應4個增量值:1、10、100、1000。

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

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

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

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