所以我有一個帶有幾個輸入和兩個單選按鈕的簡單表單，但是當我單擊其中任何一個時，它們似乎沒有反應。可能是什么問題呢？
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
uj5u.com熱心網友回復：
在您的代碼中，您設定handleSubmit為onClick在表單上被呼叫。這意味著您在該formHTML 元素上執行的任何操作都將首先是單擊事件。
這是一個小的變化從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>
uj5u.com熱心網友回復：
您必須使用checked屬性來指定檢查哪個專案。并使用value屬性來設定任何單選項的值。您還在onClickForm 標簽上定義了它不正確的屬性，您必須使用它onSubmit來代替。
這是正確的鏈接：
https://codesandbox.io/s/learning-react-forked-4wic3
uj5u.com熱心網友回復：
將 onClick 更改為 onSubmit。它會作業
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/383131.html