在 React 中檢查復(fù)選框是否被選中：
- 創(chuàng)建一個(gè)布爾狀態(tài)變量（使用state variable）來(lái)存儲(chǔ)復(fù)選框的值。
- 在輸入復(fù)選框上設(shè)置 onChange 事件偵聽(tīng)器。
- 在偵聽(tīng)器中，使用事件對(duì)象的 target.checked 屬性來(lái)檢查復(fù)選框是否被選中。
- 將選中的值存儲(chǔ)在狀態(tài)變量（state variable）中，以便能夠檢查是否從事件偵聽(tīng)器外部選中了復(fù)選框。
App.js
import { useState } from 'react';
export default function App() {
const [agreement, setAgreement] = useState(false);
const handleChange = (event) => {
setAgreement(event.target.checked);
}
return (
<div>
<div id="app">
<input
type="checkbox"
name="agreement"
onChange={handleChange}
/>
<label for="agreement">
I agree to the terms and conditions
</label>
<br /><br />
<button disabled={!agreement}>Continue</button>
</div>
</div>
);
}
事件對(duì)象的target屬性表示復(fù)選框輸入元素；其 checked 屬性的值表示該復(fù)選框是否被選中。
事件對(duì)象被傳遞給 onChange 偵聽(tīng)器，只要選中或取消選中復(fù)選框，就會(huì)調(diào)用該偵聽(tīng)器。
我們使用 useState React 鉤子來(lái)存儲(chǔ)復(fù)選框的選中狀態(tài)。 useState 返回一個(gè)包含兩個(gè)值的數(shù)組；第一個(gè)是存儲(chǔ)狀態(tài)的變量，第二個(gè)是調(diào)用時(shí)更新?tīng)顟B(tài)的函數(shù)。
因此，每次選中或取消選中復(fù)選框時(shí)，agreement狀態(tài)變量將自動(dòng)切換為 true 或 false。
我們將按鈕的 disabled 屬性設(shè)置為禁用，以分別在agreement為真和假時(shí)禁用和啟用它。
使用 ref 檢查復(fù)選框是否被選中
我們可以使用 ref 函數(shù)來(lái)檢查復(fù)選框是否選中，而不是使用 React State Hooks 鉤子函數(shù)控制復(fù)選框的選中值。
App.js 可以這樣改下，調(diào)整如下：
import { useState, useRef } from 'react';
export default function App() {
const [message, setMessage] = useState('');
const checkbox = useRef();
const handleClick = () => {
if (checkbox.current.checked) {
setMessage('You know JS');
} else {
setMessage("You don't know JS");
}
}
return (
<div>
<div id="app">
<input
type="checkbox"
name="js"
ref={checkbox}
/>
<label for="js"> JAVAScript </label>
<br />
<button onClick={handleClick}>Done</button>
<p>{message}</p>
</div>
</div >
);
}
data 的數(shù)據(jù)狀態(tài)由 React state 鉤子函數(shù)進(jìn)行控制，不是 inputs本身，但是使用 Ref，它由 DOM 本身處理，這就是為什么上面示例中的輸入復(fù)選框沒(méi)有設(shè)置 value prop 或 onChange 事件處理程序的原因。相反，我們檢查是否使用 React ref 檢查復(fù)選框。當(dāng)用戶切換復(fù)選框時(shí)，DOM 會(huì)更新選中的值，可以理解為普通的 Dom操作。
我們使用 useRef 鉤子創(chuàng)建一個(gè) ref 對(duì)象，并將其分配給復(fù)選框輸入的 ref 屬性。這樣做會(huì)將 ref 對(duì)象的當(dāng)前屬性設(shè)置為表示復(fù)選框的 DOM 對(duì)象。
useRef 返回一個(gè)可變對(duì)象，該對(duì)象在組件更新時(shí)維持其值。此外，修改此對(duì)象的當(dāng)前屬性的值不會(huì)導(dǎo)致重新渲染。這與從 useState 鉤子返回的 setState 更新函數(shù)不同。
如果表單非常簡(jiǎn)單并且不需要即時(shí)驗(yàn)證，并且只需要在提交表單時(shí)訪問(wèn)值，可以考慮使用 ref。
結(jié)束
今天的介紹就到這里，你學(xué)會(huì)了嗎？接下來(lái)我們做個(gè) useRef() 的使用總結(jié)：
- useRef() 鉤子函數(shù)創(chuàng)建 references 變量。
- 使用初始值調(diào)用 const reference = useRef(initialValue) 會(huì)返回一個(gè)名為 reference 的特殊對(duì)象。引用對(duì)象有一個(gè)屬性current，你可以使用這個(gè)屬性來(lái)讀取引用值reference.current，或者更新reference.current = newValue。
- 在組件重新渲染時(shí)，useRef() 的值是持久的。
- 與更新?tīng)顟B(tài)相反，更新 ref 不會(huì)觸發(fā)組件重新渲染。
- useRef() 也可以訪問(wèn) DOM 元素。將 ref 分配給您要訪問(wèn)的元素的 ref 屬性，通過(guò) reference.current 進(jìn)行訪問(wèn)。
感謝你的閱讀，如果你喜歡我的分享，別忘了點(diǎn)贊轉(zhuǎn)發(fā)，讓更多的人看到，最后別忘記點(diǎn)個(gè)關(guān)注，你的支持將是我分享最大的動(dòng)力，后續(xù)我會(huì)持續(xù)輸出更多內(nèi)容，敬請(qǐng)期待。
文章：
https://JavaScript.plainenglish.io/react-check-if-checkbox-is-checked-834a50ff16ec作者：Coding Beauty
非直接翻譯，有自行改編和添加部分，翻譯水平有限，難免有疏漏，歡迎指正
