我無法捕捉復選框輸入的值

我有一個 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 物件。

uj5u.com熱心網友回復：

您可以檢查輸入type并從事件物件中獲取checked值，如下所示checkbox

const changeValue = (event) => {
  let { id, value, type, checked="" } = event.target;
  if (type === "checkbox") {
    value = checked;
  }
  setAuthData((prevAuthData) => ({ ...prevAuthData, [id]: value }));
};

uj5u.com熱心網友回復：

您必須checked在復選框輸入上使用該屬性。

使用了 value 屬性，但您必須修改它以確保它發送true或發送false到狀態物件

我添加了一個片段來回應您的評論。

const {useState} = React

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

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

  const signIn = () => {
    console.log(authData)
  }
  
  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={authData.isRemember} 
        onChange={changeCheckbox} 
      />
      <button onClick={signIn}>Sign in</button>
    </form>
  )
}

// Render it
ReactDOM.createRoot(
    document.getElementById("root")
).render(
    <AuthForm />
);

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>

標籤：反应形式复选框反应钩子jsx

上一篇：在這種情況下如何正確使用Automapper

下一篇：以html形式使用PATCH方法