我從 API 獲取資料到欄位輸入，默認情況下，值來自 API。獲取后我有編輯按鈕，點擊后，我可以編輯表單欄位中的值。那么，請有人告訴我如何在輸入上添加驗證（例如，如果輸入為空，則單擊保存后在輸入中顯示訊息“空值”并在此輸入上顯示紅色邊框）謝謝
import React, { useEffect, useState, useRef } from "react";
import { useParams, Link } from "react-router-dom";
import { useGlobalContext } from "../context";
import styled from "styled-components";
import Sort from "../components/sort";
const urlID = "https://jsonplaceholder.typicode.com/users?id=";
const Profile = () => {
const { id } = useParams();
const [user, setUser] = useState([]);
const [isReadOnly, setIsReadOnly] = useState(true);
const [isEdit, setIsEdit] = useState(false);
const form = useRef(null);
const fetchUser = async (urlID) => {
try {
const response = await fetch(urlID);
const data = await response.json();
if (data) {
const { name, username, email, phone, website } = data[0];
const { street, city, zipcode } = data[0].address;
const newPerson = {
name,
username,
email,
phone,
website,
street,
city,
zipcode,
};
setUser(newPerson);
} else {
setUser(null);
}
} catch (error) {
console.log(error);
}
};
useEffect(() => {
fetchUser(`${urlID}${id}`);
}, [id]);
const editInput = () => {
setIsEdit(true);
setIsReadOnly(false);
};
const handleSubmit = (e) => {
e.preventDefault();
const data = new FormData(form.current);
const value = Object.fromEntries(data.entries());
// value.user = data.getAll("name");
console.log(value);
setIsEdit(false);
setIsReadOnly(true);
};
const handleChange = (e) => {
setUser({
...user,
[e.target.name]: e.target.value,
});
};
return (
<main>
<Wrapper>
<Sort />
<div>
<header>
<h3>User profile</h3>
<button onClick={() => editInput()} className='btn'>
Edit
</button>
</header>
<form className='form' ref={form} onSubmit={handleSubmit}>
<div className='form-control'>
<label htmlFor='name'>Name</label>
<input
name='name'
type='name'
defaultValue={user.name}
readOnly={isReadOnly}
style={
!isEdit
? { color: "rgba(0, 0, 0, 0.3)" }
: { color: "#000000" }
}
onChange={handleChange}
/>
</div>
<div className='form-control'>
<label htmlFor='username'>Username</label>
<input
name='username'
type='username'
defaultValue={user.username}
readOnly={isReadOnly}
style={
!isEdit
? { color: "rgba(0, 0, 0, 0.3)" }
: { color: "#000000" }
}
onChange={handleChange}
/>
</div>
<div className='form-control'>
<label htmlFor='email'>Email</label>
<input
name='email'
type='email'
defaultValue={user.email}
readOnly={isReadOnly}
style={
!isEdit
? { color: "rgba(0, 0, 0, 0.3)" }
: { color: "#000000" }
}
onChange={handleChange}
/>
</div>
<div className='form-control'>
<label htmlFor='street'>Street</label>
<input
type='street'
name='street'
defaultValue={user.street}
readOnly={isReadOnly}
style={
!isEdit
? { color: "rgba(0, 0, 0, 0.3)" }
: { color: "#000000" }
}
onChange={handleChange}
/>
</div>
<div className='form-control'>
<label htmlFor='city'>City</label>
<input
type='city'
name='city'
defaultValue={user.city}
readOnly={isReadOnly}
style={
!isEdit
? { color: "rgba(0, 0, 0, 0.3)" }
: { color: "#000000" }
}
onChange={handleChange}
/>
</div>
<div className='form-control'>
<label htmlFor='zipcode'>Zip code</label>
<input
type='zipcode'
name='zipcode'
defaultValue={user.zipcode}
readOnly={isReadOnly}
style={
!isEdit
? { color: "rgba(0, 0, 0, 0.3)" }
: { color: "#000000" }
}
onChange={handleChange}
/>
</div>
<div className='form-control'>
<label htmlFor='website'>Website</label>
<input
type='website'
name='website'
defaultValue={user.website}
readOnly={isReadOnly}
style={
!isEdit
? { color: "rgba(0, 0, 0, 0.3)" }
: { color: "#000000" }
}
onChange={handleChange}
/>
</div>
<div className='form-control'>
<label htmlFor='phone'>Phone</label>
<input
type='phone'
name='phone'
defaultValue={user.phone}
readOnly={isReadOnly}
style={
!isEdit
? { color: "rgba(0, 0, 0, 0.3)" }
: { color: "#000000" }
}
onChange={handleChange}
/>
</div>
<div className='form-control'>
<label htmlFor='comment'>Comment</label>
<textarea
name='textarea'
id=''
cols='30'
rows='10'
readOnly={isReadOnly}
onChange={handleChange}
></textarea>
</div>
<div className='btn-container'>
<Link to='/' className='btn'>
Back
</Link>
<button
type='submit'
className='btn-submit'
disabled={isReadOnly}
style={
!isEdit
? { backgroundColor: "#afafaf" }
: { backgroundColor: "#52CF4F" }
}
onClick={handleSubmit}
>
Save
</button>
</div>
</form>
</div>
</Wrapper>
</main>
);
};
const Wrapper = styled.section`
display: grid;
grid-template-columns: 1fr 2fr;
max-width: 665px;
width: 90vw;
gap: 2rem;
h3 {
font-style: normal;
font-weight: 700;
font-size: 14px;
line-height: 16px;
color: #000000;
}
.btn {
background: #4b51ef;
border-radius: 5px;
padding: 6px 11px;
font-weight: 400;
font-size: 12px;
line-height: 14px;
color: #ffffff;
border: transparent;
text-decoration: none;
}
header {
display: flex;
align-items: center;
justify-content: space-between;
}
.form {
display: grid;
gap: 10px;
padding: 20px 0 20px 12px;
background: #ffffff;
border: 2px solid #f3f3f3;
border-radius: 8px;
box-sizing: border-box;
}
.form-control {
display: flex;
flex-direction: column;
gap: 3px;
max-width: 210px;
}
.form-control label {
font-weight: 400;
font-size: 8px;
line-height: 9px;
color: #000000;
}
.form-control input,
textarea {
font-weight: 400;
font-size: 10px;
line-height: 12px;
/* color: rgba(0, 0, 0, 0.3); */
padding: 5px 0 5px 10px;
background: #ffffff;
border: 1px solid #d8d8d8;
border-radius: 5px;
}
/* input:invalid {
border-color: red;
} */
.btn-container {
display: flex;
align-items: center;
justify-content: center;
}
.btn-submit {
background: #afafaf;
border-radius: 5px;
border: transparent;
padding: 5px 15px;
font-weight: 400;
font-size: 12px;
line-height: 14px;
color: #ffffff;
margin-left: 10px;
}
`;
export default Profile;
uj5u.com熱心網友回復：
你可以檢查Formik
<Formik
initialValues={{
firstName: '',
lastName: '',
email: '',
}}
validationSchema={SignupSchema}
onSubmit={values => {
// same shape as initial values
console.log(values);
}}
>
{({ errors, touched }) => (
<Form>
<Field name="firstName" />
{errors.firstName && touched.firstName ? (
<div>{errors.firstName}</div>
) : null}
<Field name="lastName" />
{errors.lastName && touched.lastName ? (
<div>{errors.lastName}</div>
) : null}
<Field name="email" type="email" />
{errors.email && touched.email ? <div>{errors.email}</div> : null}
<button type="submit">Submit</button>
</Form>
)}
</Formik>
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/450507.html
下一篇：Else陳述句和while回圈