用React構建一個簡單的計數器

在React中建立計數器的一個非常簡單的例子

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

讓我們為此使用Codepen。我們首先分叉React模板筆

在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元素都有2個道具:incrementonClickFunction。我們創建4個不同的按鈕,並帶有4個增量值:1、10 100、1000。

單擊“按鈕”組件中的按鈕時,incrementCount函數被調用。

此功能必須增加本地計數。我們該怎麼做?我們可以使用鉤子:

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()將count變量初始化為0並為我們提供setCount()更新其值的方法。

我們在incrementCount()方法實現,該調用setCount()將值更新為的現有值count,再加上每個Button組件傳遞的增量。

The react counter

完整的示例代碼可以在下面找到https://codepen.io/flaviocopes/pen/QzEQPR

免費下載我的反應手冊


更多反應教程: