React小知識，如何確認復選框是否被選中？

發(fā)布時間：2023-07-02 22:24:27 作者：網友整理

在 React 中檢查復選框是否被選中：

創(chuàng)建一個布爾狀態(tài)變量（使用state variable）來存儲復選框的值。
在輸入復選框上設置 onChange 事件偵聽器。
在偵聽器中，使用事件對象的 target.checked 屬性來檢查復選框是否被選中。
將選中的值存儲在狀態(tài)變量（state variable）中，以便能夠檢查是否從事件偵聽器外部選中了復選框。

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>
  );
}

事件對象的target屬性表示復選框輸入元素；其 checked 屬性的值表示該復選框是否被選中。

事件對象被傳遞給 onChange 偵聽器，只要選中或取消選中復選框，就會調用該偵聽器。

我們使用 useState React 鉤子來存儲復選框的選中狀態(tài)。 useState 返回一個包含兩個值的數(shù)組；第一個是存儲狀態(tài)的變量，第二個是調用時更新狀態(tài)的函數(shù)。

因此，每次選中或取消選中復選框時，agreement狀態(tài)變量將自動切換為 true 或 false。

我們將按鈕的 disabled 屬性設置為禁用，以分別在agreement為真和假時禁用和啟用它。

使用 ref 檢查復選框是否被選中

我們可以使用 ref 函數(shù)來檢查復選框是否選中，而不是使用 React State Hooks 鉤子函數(shù)控制復選框的選中值。

App.js 可以這樣改下，調整如下：

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ù)進行控制，不是 inputs本身，但是使用 Ref，它由 DOM 本身處理，這就是為什么上面示例中的輸入復選框沒有設置 value prop 或 onChange 事件處理程序的原因。相反，我們檢查是否使用 React ref 檢查復選框。當用戶切換復選框時，DOM 會更新選中的值，可以理解為普通的 Dom操作。

我們使用 useRef 鉤子創(chuàng)建一個 ref 對象，并將其分配給復選框輸入的 ref 屬性。這樣做會將 ref 對象的當前屬性設置為表示復選框的 DOM 對象。

useRef 返回一個可變對象，該對象在組件更新時維持其值。此外，修改此對象的當前屬性的值不會導致重新渲染。這與從 useState 鉤子返回的 setState 更新函數(shù)不同。

如果表單非常簡單并且不需要即時驗證，并且只需要在提交表單時訪問值，可以考慮使用 ref。

結束

今天的介紹就到這里，你學會了嗎？接下來我們做個 useRef() 的使用總結：

useRef() 鉤子函數(shù)創(chuàng)建 references 變量。
使用初始值調用 const reference = useRef(initialValue) 會返回一個名為 reference 的特殊對象。引用對象有一個屬性current，你可以使用這個屬性來讀取引用值reference.current，或者更新reference.current = newValue。
在組件重新渲染時，useRef() 的值是持久的。
與更新狀態(tài)相反，更新 ref 不會觸發(fā)組件重新渲染。
useRef() 也可以訪問 DOM 元素。將 ref 分配給您要訪問的元素的 ref 屬性，通過 reference.current 進行訪問。

感謝你的閱讀，如果你喜歡我的分享，別忘了點贊轉發(fā)，讓更多的人看到，最后別忘記點個關注，你的支持將是我分享最大的動力，后續(xù)我會持續(xù)輸出更多內容，敬請期待。