在這個短教程中,我們將使用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元素有兩個屬性:increment
和onClickFunction
。我們創建了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()
方法的實現中都使用了這兩個。
完整的範例代碼可以在這裡查看。