السلام عليكم ورحمة اله تعالى وبركاته ،
اعمل على تطبيق رياكت بسيط CRUD users،
وعند طباعة اول حرف او رقم في حقل الادخال input يفقد التركيز focus الخاص به , ثم يجب عليه الضغط عليه مرة اخرى لاعادته ،
بحثت كثيرا حول حل للمشكل في عدة مواقع ، وحتى اني استعنت بالChatGpt
لكن لم يجدي اي حل نفعا ،
ارجو من واجهته نفس المشكل ان يخبرني كيف قام بحلها من فضلكم .
شكرا .
import "./App.css";
import "bootstrap/dist/css/bootstrap.min.css";
import Heading from "./Components/Heading";
import { useState } from "react";
import Button from "./Components/Button";
import Table from "./Components/Table";
import UsersInfo from "./Components/UsersInfo";
function App() {
const [users, setUsers] = useState([]);
const [fullname, setFullname] = useState("");
const [age, setAge] = useState("");
const [jobtitle, setJobtitle] = useState("");
const [email, setEmail] = useState("");
const [darkMood, setDarkMood] = useState(false);
const [addUser, setAddUser] = useState(false);
const handleToogleMood = () => {
setDarkMood(!darkMood);
};
const handleFullName = (e) => {
setFullname(e.target.value);
};
const handleAge = (e) => {
setAge(e.target.value);
};
const handleJobTitle = (e) => {
setJobtitle(e.target.value);
};
const handleEmail = (e) => {
setEmail(e.target.value);
};
const saveNewUserHandler = () => {
const newUser = {
id: Date.now(),
FullName: fullname,
Age: age,
JobTitle: jobtitle,
Email: email,
};
const newUsers = [...users, newUser];
setUsers(newUsers);
setAddUser(false);
setFullname("");
setAge("");
setEmail("");
setJobtitle("");
};
const AddUser = () => {
return (
<div>
<div className="d-flex justify-content-between">
<h1 className={`text-left text-danger font-weight-bold`}>
Add User
</h1>
<button
className="btn btn-primary font-weight-bold"
onClick={handleToogleMood}
>
Toogle Mood
</button>
</div>
<div className="col-6">
<input
type="text"
placeholder="Full Name"
className="mb-2 form-control"
value={fullname}
onChange={handleFullName}
/>
<input
type="number"
placeholder="Age"
className="mb-2 form-control"
value={age}
onChange={handleAge}
/>
<input
type="text"
placeholder="Job Title"
className="mb-2 form-control"
value={jobtitle}
onChange={handleJobTitle}
/>
<input
type="email"
placeholder="Email"
className="mb-2 form-control"
value={email}
onChange={handleEmail}
/>
<Button type={saveNewUserHandler} text="Save" />
</div>
</div>
);
};
const AddNewUserHandler = () => {
setAddUser(true);
};
const UsersPreview = () => {
return (
<>
<Heading
text="CRUD APP"
handleToogleMood={handleToogleMood}
color="danger"
/>
<Button text="Add new User" type={AddNewUserHandler} />
<Table darkMood={!darkMood}>
{users.map((user, index) => {
return (
<UsersInfo
key={user.id}
index={index + 1}
fullName={user.FullName}
age={user.Age}
job={user.JobTitle}
email={user.Email}
autoFocus
/>
);
})}
</Table>
</>
);
};
return (
<div>
<div
className={`${
!darkMood && "bg-dark"
} app d-flex justify-content-center`}
>
<div className="container mt-5">
{addUser ? <AddUser /> : <UsersPreview />}
</div>
</div>
</div>
);
}
export default App;
مرحبا استاذ , مالذي حصل معك ؟؟
