在 React 中狀態的修改是非常常見的事,而工作中幾乎都是使用函式組件,所以 Hooks 是極為重要的一個概念。今天來分享一些關於 React 中 state 的修改方法。
類式組件修改 state
在類式組件中,當我們需要定義多個 state 時可以用物件的方式來給定,比如:
this.state{ counter: 0, top: 10, bottom: 20 ... };
需要修改 state 的值時,可以利用 setState
函數來修改,並且是合併式修改,比如下面的例子只修改了 counter
,但是 React 會自動幫你合併到目前的 state,因此 top
, bottom
也會保留:
this.setState((state, props) => ({ count: state.counter + props.increment }));
函式組件修改 state
同樣的在函式組件中我們可以使用 useState
這個 hook 來達到相同效果,你可以在 useState(defaultValue)
中給定初始值,而這個初始值只有在第一次 render 的時候用到:
const [counter, setCounter] = useState(0)
當我們需要定義多個 state時可以使用物件的方式來給定,使用 setDate
函數可以修改 date
的值:
const [date, setDate] = useState({ start: new Date(), end: new Date() })
這個 setXxxxx
方法是 React 提供給你修改狀態的函數,類似於類式組件的 setState
。
不過要注意很重要的一點是,useState
的 set 方法並不像類式組件的 setState
,它不會將舊的 state 和新修改的 state 合併,所以當你修改新的 state 卻沒有傳入舊的 state 時,之前的 state 會不見,如果要將舊的 state 也保留下來可以這麼寫:
SetDate((prev) => ({ ...prev, count: 10 }))
setState 動態修改 key 名
假設我們今天有兩個輸入框,當我們修改輸入框中的值,第一個輸入框的值會修改 start 這個狀態,第二個輸入框的值則會修改 end 狀態,我們可以這麼去寫:
<Input type="text" placeholder="start" value={date.start} onChange={(e) => handleChange(e.target.value, 'start')}></input> <Input type="text" placeholder="end" value={date.end} onChange={(e) => handleChange(e.target.value, 'end')}></input>
將 handleChange 方法定義為:
const handleChange = (val, key) => { setDate((prev) => ({ ...prev, [key]: val, })); };
如此一來便能使用同一個方法來修改不同的 state 值。
Latest posts by pluto (see all)
- React 那些好看、有趣、實用的函式庫、組件庫推薦(2) - 2022 年 6 月 26 日
- 解決 preact-router 資源請求路徑錯誤的問題 - 2022 年 6 月 24 日
- [楓之谷私服] 潮流轉蛋機 NPC 腳本優化 - 2022 年 6 月 19 日