React中如何获取复选框未选中状态下的表单值

HTML表单原生规则里，checkbox类型输入项仅在勾选时才会将自身的name-value对加入提交的表单数据集，未勾选状态下表单会直接忽略该字段，不会提交任何对应值，这是规范默认行为，不是代码运行错误。

先修正你现有代码里的几个明显问题，这些问题会导致复选框交互本身就异常：

• 复选框的disabled属性绑定错误：当前写法disabled={handleClick}是把函数本身传入属性，函数属于真值，会导致复选框永远处于禁用状态无法点击，应该绑定你定义的disabled状态值
• label和复选框的关联失效：复选框id为scales，label的for属性写的是user_checkbox，二者不匹配，点击label无法触发复选框选中；另外JSX语法中for属性需要写为htmlFor，标签上的class属性需要写为className，否则会触发React警告。

以下是两个可直接落地的解决方案，根据你的sendEmail实现逻辑选择即可：

如果你的sendEmail是基于原生FormData采集表单值（绝大多数邮件发送类库比如EmailJS都采用这个逻辑），只需要在提交逻辑里手动判断复选框字段是否存在，补全未选中状态的值即可，不需要改动现有表单结构：

const sendEmail = (e) => {
  e.preventDefault();
  const formData = new FormData(e.target);
  // 复选框字段存在即为勾选状态，返回true；不存在即为未勾选，手动赋值为false
  const checkboxStatus = formData.has('user_checkbox');
  formData.set('user_checkbox', checkboxStatus);
  // 后续原有发送逻辑保持不变即可
}

如果希望所有表单值都由React状态统一管控，可以给复选框单独绑定状态，无论勾选与否都能直接从状态拿到确定的布尔值：

// 新增状态管理复选框选中值，默认未勾选为false
const [isAgreed, setIsAgreed] = useState(false);
const [disabled, setDisabled] = useState(false);
const handleClick = () => setDisabled(!disabled);

// 修正后的复选框+label代码
<div className="checkbox-container">
  <input 
    type="checkbox" 
    id="user_checkbox" 
    name="user_checkbox" 
    disabled={disabled}
    checked={isAgreed}
    onChange={(e) => setIsAgreed(e.target.checked)}
  />  
  <label htmlFor="user_checkbox">By submitting a request you acknowledge the requirement.</label>
</div>

提交时直接读取isAgreed状态值即可，不会出现空值问题。

内容的提问来源于stack exchange，提问作者David Jay