React 中的核取方塊 onChange
我們將介紹如何從 React 中的 onChange 事件的核取方塊傳送值。
從 React 中的 onChange 事件的核取方塊傳送值
在開發 Web 應用程式或商業軟體時，我們需要使用核取方塊來顯示選項列表，使用者可以從這些選項中進行選擇。
使用者可以從選項列表中選擇一到幾個選項，並且不限制只能選擇一個核取方塊，但使用者甚至可以選擇所有核取方塊。
每個核取方塊都獨立於列表中的所有其他核取方塊，因此選中一個框不會取消選中其他選中的核取方塊。
本教程將建立一個核取方塊列表並將它們傳送到 getValue 函式以 console.log 它們的值。讓我們使用以下命令建立一個新應用程式。
# react
npx create-react-app my-app
建立新的 React 應用程式後，我們將使用此命令轉到應用程式目錄。
# react
cd my-app
現在，讓我們執行我們的應用程式來檢查所有依賴項是否安裝正確。
# react
npm start
讓我們使用呼叫函式 checkValue 的 onChange 方法建立具有不同值的核取方塊列表。
# react
<div className="App">
<h1>Select What You Want</h1>
<div>
<input id="box1" onChange={checkValue} type="checkbox" value="Box1"/>
<label htmlFor="#box1">Box 1</label>
</div>
<div>
<input id="box2" onChange={checkValue} type="checkbox" value="Box2"/>
<label htmlFor="#box2">Box 2</label>
</div>
<div>
<input id="box3" onChange={checkValue} type="checkbox" value="Box3"/>
<label htmlFor="#box3">Box 3</label>
</div>
<div>
<input id="box4" onChange={checkValue} type="checkbox" value="Box4"/>
<label htmlFor="#box4">Box 4</label>
</div>
</div>
一旦我們使用呼叫函式 checkValue 的 onChange 方法建立了一個核取方塊列表，我們將建立函式 checkValue，該函式將接受包含選中核取方塊值的引數 e，我們將 console.log 使用者檢查的核取方塊值。
# react
function checkValue(e) {
var value = e.target.value;
console.log("You selected " + value);
}
輸出：
如上所示，當我們選中任何核取方塊時，它 console.log 該核取方塊的值。
如果我們使用 onChange 傳送核取方塊值，則存在一個問題。如果我們取消選中任何一個核取方塊，函式 checkValue 將再次被呼叫，我們將收到使用者未選中的核取方塊的值，如下所示。
輸出：
如上所示，當我們取消選中框 1 時，框 1 的值再次傳送給函式。如果我們正在使用多個核取方塊並希望儲存核取方塊的值，這將不是獲取和儲存值的最佳方式。
獲取和儲存核取方塊值的最佳方法是通過表單。
但是，如果我們正在使用可以與一個核取方塊一起工作並且完全取決於該核取方塊的狀態更改的東西，那麼使用 onChange 方法來執行某些功能可能是一個不錯的選擇。
Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.
LinkedIn