当我单击单选按钮时，它没有反应，可能是什么问题？答案

【问题标题】：The radio button doesn't react when I click on it, what could be the problem?当我单击单选按钮时，它没有反应，可能是什么问题？
【发布时间】：2022-01-13 05:20:15
【问题描述】：

所以我有一个简单的表单，其中包含几个输入和两个单选按钮，但是当我单击其中任何一个时，它们似乎没有反应。可能是什么问题？

import { useState } from "react";
import uuid from "react-uuid";
import "./style.css";

export default function LargeForm() {
  const [people, setPeople] = useState([]);

  const [newUser, setNewUser] = useState({
    id: uuid(),
    firstName: "",
    lastName: "",
    sex: "",
    dateOfBirth: "",
    email: "",
    contact: "",
    password: ""
  });

  const handleChange = (value, type) => {
    setNewUser((prev) => {
      return { ...prev, [type]: value };
    });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    if (
      newUser.firstName &&
      newUser.lastName &&
      newUser.dateOfBirth &&
      newUser.email &&
      newUser.contact &&
      newUser.password
    ) {
      setPeople([...people, newUser]);
      setNewUser({
        firstName: "",
        lastName: "",
        sex: "",
        dateOfBirth: "",
        email: "",
        contact: "",
        password: ""
      });
    } else {
      console.log("Error!");
    }
  };

  return (
    <>
      <form className="container" autoComplete="off" onSubmit={handleSubmit}>
        <div>
          <label htmlFor="firstName" className="label">
            First name:{" "}
          </label>
          <input
            type="text"
            id="firstName"
            name="firstName"
            className="input"
            value={newUser.firstName}
            onChange={(e) => handleChange(e.target.value, "firstName")}
          />
          <br />
          <label htmlFor="lastName" className="label">
            Last name:{" "}
          </label>
          <input
            type="text"
            id="lastName"
            name="lastName"
            className="input"
            value={newUser.lastName}
            onChange={(e) => handleChange(e.target.value, "lastName")}
          />
          <br />
          <label htmlFor="sex" className="label">
            Sex:
          </label>
          <input
            type="radio"
            id="male"
            name="sex"
            value={newUser.sex}
            onChange={(e) => handleChange(e.target.value, "sex")}
          />
           <label for="male">Male</label> {" "}
          <input
            type="radio"
            id="female"
            name="sex"
            value={newUser.sex}
            onChange={(e) => handleChange(e.target.value, "sex")}
          />
          <label for="female">Female</label>
          <br />
          <label htmlFor="dateOfBirht" className="label">
            Date of birth:{" "}
          </label>
          <input
            type="date"
            id="dateOfBirht"
            name="dateOfBirht"
            className="input"
            value={newUser.dateOfBirth}
            onChange={(e) => handleChange(e.target.value, "dateOfBirth")}
          />
          <br />
          <label htmlFor="email" className="label">
            Email:{" "}
          </label>
          <input
            type="email"
            id="Email"
            name="Email"
            className="input"
            value={newUser.email}
            onChange={(e) => handleChange(e.target.value, "email")}
          />
          <br />
          <label htmlFor="contact" className="label">
            Contact:{" "}
          </label>
          <input
            type="text"
            id="contact"
            name="contact"
            className="input"
            value={newUser.Contact}
            onChange={(e) => handleChange(e.target.value, "contact")}
          />
          <br />
          <label htmlFor="password" className="label">
            Password:{" "}
          </label>
          <input
            type="password"
            id="password"
            name="password"
            className="input"
            value={newUser.password}
            onChange={(e) => handleChange(e.target.value, "password")}
          />
        </div>
        <br />
        <button type="submit" className="btn">
          Submit
        </button>
      </form>
      {people.map((person) => {
        return (
          <div className="list" key={person.id}>
            {person.firstName}
            <br />
            {person.lastName}
            <br />
            {person.sex}
            <br />
            {person.dateOfBirth}
            <br />
            {person.email}
            <br />
            {person.contact}
            <br />
            {person.password}
          </div>
        );
      })}
    </>
  );
}

CodeSandbox 链接如下。

https://codesandbox.io/s/learning-react-5vj5g?file=/src/useReducer/exampleForm/LargeForm.js

【问题讨论】：

当您发布您的问题时，请同时发布一段代码，以便查看您的问题的人可以快速浏览它。此外，codesadbox 或任何其他在线服务可能会破坏链接或停止工作，这会使您的问题变得赤裸裸，只有您的问题作为文本。这次我给你加了。

标签： html reactjs forms radio-button

【解决方案1】：

在您的代码中，您将handleSubmit 设置为在表单的onClick 上调用。这意味着您在该 form HTML 元素上执行的任何操作都将首先是一个点击事件。

从onClick 到onSubmit 的变化很小

...
<form className="container" autoComplete="off" onSubmit={handleSubmit}>
...

还有你定义radio 输入的部分，你应该使用该输入的checked 状态并将value 设置为该radio 输入的所需值：

<label htmlFor="sex" className="label">
  Sex:
</label>
<input
  type="radio"
  id="male"
  name="sex"
  value='male'
  checked={newUser.sex === 'male'}
  onChange={(e) => handleChange(e.target.value, "sex")}
/>
 <label for="male">Male</label> {" "}
<input
  type="radio"
  id="female"
  name="sex"
  value='female'
  checked={newUser.sex === 'female'}
  onChange={(e) => handleChange(e.target.value, "sex")}
/>
<label for="female">Female</label>

【讨论】：

那个 onClick 应该是 onSubmit。直到现在我才意识到这个错误。现在它起作用了。谢谢。
没问题。我发现这是那些盲点错误之一。很高兴我能帮上忙。
您回答的第二部分是我的回答和链接@MarioPetrovic 的副本。不过没关系

【解决方案2】：

您必须使用checked 属性来指定要检查的项目。并使用value 属性设置任何单选项目的值。您还在 Form 标签上定义了 onClick 属性，这是不正确的，您必须使用 onSubmit 代替。

这是正确的链接：

https://codesandbox.io/s/learning-react-forked-4wic3

【讨论】：

【解决方案3】：

将 onClick 更改为 onSubmit。它会工作的

【讨论】：