React小知识，如何确认复选框是否被选中？

　　在 React 中检查复选框是否被选中：创建一个布尔状态变量（使用state variable ）来存储复选框的值。在输入复选框上设置 onChange 事件侦听器。在侦听器中，使用事件对象的 target.checked 属性来检查复选框是否被选中。将选中的值存储在状态变量（state variable ）中，以便能够检查是否从事件侦听器外部选中了复选框。
　　App.jsimport { useState } from ＂react＂;  export default function App() {   const [agreement, setAgreement] = useState(false);   const handleChange = (event) => {     setAgreement(event.target.checked);   }   return (                                         I agree to the terms and conditions                  

         Continue               ); }
　　事件对象的target  属性表示复选框输入元素；其 checked 属性的值表示该复选框是否被选中。
　　事件对象被传递给 onChange 侦听器，只要选中或取消选中复选框，就会调用该侦听器。
　　我们使用 useState React 钩子来存储复选框的选中状态。 useState 返回一个包含两个值的数组；第一个是存储状态的变量，第二个是调用时更新状态的函数。
　　因此，每次选中或取消选中复选框时，agreement  状态变量将自动切换为 true 或 false。
　　我们将按钮的 disabled 属性设置为禁用，以分别在agreement  为真和假时禁用和启用它。使用 ref 检查复选框是否被选中
　　我们可以使用 ref 函数来检查复选框是否选中，而不是使用 React State Hooks 钩子函数控制复选框的选中值。
　　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 (                               JavaScript          
         Done         
{message}            
   ); }
　　data  的数据状态由 React state 钩子函数进行控制 ，不是 inputs本身 ，但是使用 Ref，它由 DOM 本身处理，这就是为什么上面示例中的输入复选框没有设置 value prop 或 onChange 事件处理程序的原因。相反，我们检查是否使用 React ref 检查复选框。当用户切换复选框时，DOM 会更新选中的值，可以理解为普通的 Dom操作。
　　我们使用 useRef 钩子创建一个 ref 对象，并将其分配给复选框输入的 ref 属性。这样做会将 ref 对象的当前属性设置为表示复选框的 DOM 对象。
　　useRef 返回一个可变对象，该对象在组件更新时维持其值。此外，修改此对象的当前属性的值不会导致重新渲染。这与从 useState 钩子返回的 setState 更新函数不同。
　　如果表单非常简单并且不需要即时验证，并且只需要在提交表单时访问值，可以考虑使用 ref。结束
　　今天的介绍就到这里，你学会了吗？接下来我们做个 useRef() 的使用总结：useRef() 钩子函数创建 references 变量。使用初始值调用 const reference = useRef(initialValue) 会返回一个名为 reference 的特殊对象。引用对象有一个属性current，你可以使用这个属性来读取引用值reference.current，或者更新reference.current = newValue。在组件重新渲染时，useRef() 的值是持久的。与更新状态相反，更新 ref 不会触发组件重新渲染。useRef() 也可以访问 DOM 元素。将 ref 分配给您要访问的元素的 ref 属性，通过 reference.current 进行访问。
　　感谢你的阅读，如果你喜欢我的分享，别忘了点赞转发，让更多的人看到，最后别忘记点个关注，你的支持将是我分享最大的动力，后续我会持续输出更多内容，敬请期待。文章：https://javascript.plainenglish.io/react-check-if-checkbox-is-checked-834a50ff16ec
　　作者：Coding Beauty
　　非直接翻译，有自行改编和添加部分，翻译水平有限，难免有疏漏，欢迎指正