我无法捕捉复选框输入的值答案

【问题标题】：I can't catch the value of the checkbox input我无法捕捉复选框输入的值
【发布时间】：2022-11-02 02:10:18
【问题描述】：

我有一个 React 表单，我无法使用 useState 钩子控制复选框输入的值。我对其他输入没有这个问题。

我无法将复选框输入值传递给 AuthData 对象。当您单击“登录”按钮时，控制台应显示带有字段 { login: '', password: '', isRemember: '' } 的 AuthData 对象

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

export const AuthForm = ({ handlers }) => {
  const [authData, setAuthData] = useState({ login: '', password: '', isRemember: '' })

  const changeValue = (event) => {
    const { id, value } = event.target
    setAuthData((prevAuthData) => ({ ...prevAuthData, [id]: value }))
  }

  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" 
        value={authData.isRemember} 
        onChange={changeValue} 
      />
      <button onClick={signIn}>Sign in</button>
    </form>
  )
}

当您更改输入值时，它们的值必须传递给 authValue 对象。使用“login”和“password”输入，它们的值进入 authValue 对象，但使用“isRemember”输入，这不起作用。复选框输入的值不知何故不会进入 authValue 对象。

【问题讨论】：

标签： reactjs forms checkbox react-hooks jsx

【解决方案1】：

您必须在复选框输入上使用 checked 属性。

使用了 value 属性，但您必须对其进行修改以确保它将 true 或 false 发送到状态对象

【讨论】：