React表单：useState无法控制checkbox值并传入AuthData的问题

你的问题出在checkbox的受控逻辑和普通输入框不同，以下是具体的问题点和修复方案：

问题根源 #

1. Checkbox的选中状态由checked属性控制，而非value属性——你当前用了value={authData.isRemember}，这是错误的。
2. Checkbox的取值应该是event.target.checked（布尔值），而不是event.target.value——你现在统一取value，导致checkbox的状态无法正确更新到authData中。
3. 初始化时isRemember设为空字符串，不符合checkbox的布尔值类型规范，应该设为false。

修复后的代码 #

import React from 'react'
import { useState } from 'react'

export const AuthForm = ({ handlers }) => {
  // 初始化isRemember为布尔值false，符合checkbox的状态类型
  const [authData, setAuthData] = useState({ login: '', password: '', isRemember: false })

  const changeValue = (event) => {
    const { id, type, value, checked } = event.target
    // 根据输入类型选择对应的值：checkbox取checked，其他取value
    const inputValue = type === 'checkbox' ? checked : value
    setAuthData((prevAuthData) => ({ ...prevAuthData, [id]: inputValue }))
  }

  const signIn = () => {
    console.log(authData)
  }

  return (
    <form onSubmit={(e) => e.preventDefault()}>
      <input 
        type="text" 
        id="login" 
        placeholder="Login/E-mail/Phone" 
        value={authData.login} 
        onChange={changeValue} 
      />
      <input 
        type="password" 
        id="password" 
        placeholder="Password" 
        value={authData.password} 
        onChange={changeValue} 
      />
      <input 
        type="checkbox" 
        id="isRemember" 
        // 用checked属性绑定状态，而非value
        checked={authData.isRemember} 
        onChange={changeValue} 
      />
      <button onClick={signIn}>Sign in</button>
    </form>
  )
}

关键改动说明 #

• 初始化authData.isRemember为false，匹配checkbox的布尔状态类型。
• 在changeValue函数中，根据输入框的type判断：如果是checkbox，就取checked值，否则取value。
• 将checkbox的value属性替换为checked，绑定到authData.isRemember，实现受控状态。

现在点击"Sign in"按钮，控制台会输出包含正确isRemember布尔值的authData对象。

内容的提问来源于stack exchange，提问作者Georgii Galechyan