嘿，我是 React js 新手。 任何人都可以帮助回答这个问题：如何防止输入字段在打字时失去焦点？ 每次我在某个输入字段中输入内容时，该字段就会失去焦点。
注：第一个 <div className="container_info">输入工作得很好。
import React, { Fragment, useState } from "react";
import {
FaRegSave
} from "react-icons/fa";
import axios from 'axios';
import { Tabs, Tab } from '@material-ui/core'
const InputEemp = (index) => {
/* information publiques */
const [fname, setFname] = useState("");
const [lname, setLname] = useState("");
const [gender, setGender] = useState("");
const [tel_pro_portable, setTelPportable] = useState("");
const [lieu_travail, setLieu_Travail] = useState("");
const [adresse_elec_pro, setAdresseEpro] = useState("");
const [tele_pro, setTelePro] = useState("");
const [departement, setDepartement] = useState("");
const [titre_post, setTitrePost] = useState("");
const [gestionnaire, setGestionnaire] = useState("");
const [mentor, setMentor] = useState("");
const [temp_travail, setTempTravail] = useState("");
const [autre, setAutre] = useState("");
/* end of information publiques */
//appbar************
const [tabValue, setValue] = React.useState(0);
const handlerTabs = (e, val) => {
console.warn(val);
setValue(val);
}
function TabPanel(props) {
const { children, value, index } = props;
return (
<div>
{
value === index && (<div>{children}</div>
)
}
</div>
)
}
const addEmpll = async e => {
e.preventDefault();
try {
await axios.post('http://localhost:5000/employees', {
f_name: fname,
l_name: lname,
gender: gender,
tel_pro_portable: tel_pro_portable,
lieu_travail: lieu_travail,
adresse_elec_pro: adresse_elec_pro,
tele_pro: tele_pro,
departement: departement,
titre_post: titre_post,
gestionnaire: gestionnaire,
mentor: mentor,
temp_travail: temp_travail,
autre: autre
}, {
headers: {
'Content-Type': 'application/json'
}
})/* .then(res => {
console.log(res.data);
}); */
window.location = ('/');
} catch (err) {
console.log(err.message);
}
};
return (
<Fragment>
<div className="container_emp">
<form onSubmit={addEmpll}>
<div className="container_info">
<div className="header">Profile de l'Employe : <button type="submit" className="sauver_btn btn btn-success"><FaRegSave /> Sauver</button>
<hr className="hr_padding" />
</div>
<div className="side_content imgCenter"><img src=".\nouser.png" alt="emp" className="rounded-circle bg-secondary" style={{ "width": "120px" }} /></div>
<div className="content">
<div className="content_cc">
<div className="nom_label"><label className="font-weight-bold text-secondary col">Nom :</label></div>
<div className="nom_input"><input type="text" className="form-control col" placeholder="insérez votre nom" value={fname} onChange={e => setFname(e.target.value)} /></div>
<div className="prenom_label"><label className="font-weight-bold text-secondary col">Prénom :</label></div>
<div className="prenom_input"><input type="text" className="form-control col" placeholder="insérez votre Prénom" value={lname} onChange={e => setLname(e.target.value)} /></div>
<div className="sexe_label"><label className="font-weight-bold text-secondary col">Sexe :</label></div>
<div className="F_radio">
<label className="radio-inline pr-5">
<input type="radio" name="gender" value="Masculin" onChange={e => setGender(e.target.value)} /> Masculin
</label>
</div>
<div className="M_radio">
<label className="radio-inline">
<input type="radio" name="gender" value="Féminin" onChange={e => setGender(e.target.value)} /> Féminin
</label>
</div>
</div>
</div>
<div className="footer imgCenter"> <input type="file" className="form-control-file" id="exampleFormControlFile1" text="Changer l'image"></input></div>
</div>
<div className="emp_info1">
<hr className="hr_padding" />
{/* <AppBar position="static"> */}
<Tabs value={tabValue} onChange={handlerTabs}>
<Tab className="bg-dark text-white" label="Information Publiques" />
<Tab className="bg-dark text-white" label="Information Personnelle" />
<Tab className="bg-dark text-white" label="Paramètre RH" />
<Tab className="bg-dark text-white" label="Configuration de la paie" />
<Tab className="bg-dark text-white" label="Prêt logement" />
</Tabs>
{/* </AppBar> */}
<TabPanel value={tabValue} index={0}>
<div className="info_publique">
<div className="info_contact">
<div className="info_contact_child">
<div className="info_contact_label text-info font-weight-bold"><h4>Information de contact</h4></div>
<div className="tele_por">Tél. portable professionnel :</div>
<div className="telePor_input"><input type="text" className="form-control col" placeholder="insérez votre Tél. portable professionnel" value={tel_pro_portable} onChange={e => setTelPportable(e.target.value)} /></div>
<div className="lieu_tr">Lieu de Travail :</div>
<div className="lieu_input"><input type="text" value={lieu_travail} onChange={e => setLieu_Travail(e.target.value)} className="form-control col" placeholder="insérez votre Lieu de Travail" /></div>
<div className="adresse">Adresse électronique professionnel :</div>
<div className="adrees_input"><input type="text" value={adresse_elec_pro} onChange={e => setAdresseEpro(e.target.value)} className="form-control col" placeholder="insérez votre Adresse électronique professionnel" /></div>
<div className="tele_prof">Télephone professionnel :</div>
<div className="tele_pro_input"><input type="text" value={tele_pro} onChange={e => setTelePro(e.target.value)} className="form-control col" placeholder="insérez votre Télephone professionnel" /></div>
</div>
</div>
<div className="info_post">
<div className="info_post_child">
<div className="info_post_label text-info font-weight-bold"><h4>Post</h4></div>
<div className="dep_label">Département :</div>
<div className="dep_input">
<select className="form-control" value={departement} onChange={e => setDepartement(e.target.value)}>
<option value={0}>Select Département</option>
<option>IT</option>
<option>dep 1</option>
<option>dep 2</option>
</select>
</div>
<div className="titre_label">Titre du poste :</div>
<div className="titre_input">
<select className="form-control" value={titre_post} onChange={e => setTitrePost(e.target.value)}>
<option value={0}>Select Titre poste</option>
<option>poste 1</option>
<option>poste 2</option>
</select>
</div>
<div className="gestionnaire_label">Gestionnaire :</div>
<div className="gestionnaire_input">
<select className="form-control" value={gestionnaire} onChange={e => setGestionnaire(e.target.value)}>
<option value={0}>Select Gestionnaire</option>
<option>Gestionnaire 1</option>
<option>Gestionnaire 2</option>
</select>
</div>
<div className="mentor_label">Mentor :</div>
<div className="mentor_input">
<select className="form-control" value={mentor} onChange={e => setMentor(e.target.value)}>
<option value={0}>Select Mentor</option>
<option>Mentor 1</option>
<option>Mentor 2</option>
</select>
</div>
<div className="T_travail_label">Temps de travail :</div>
<div className="T_travail__input">
<select className="form-control" value={temp_travail} onChange={e => setTempTravail(e.target.value)}>
<option value={0}>Select Temps travail</option>
<option>Temps travail 1</option>
<option>Temps travail 2</option>
</select>
</div>
</div>
</div>
<div className="autre_info">
<textarea className="form-control" rows="2" placeholder="Autre information" value={autre} onChange={e => setAutre(e.target.value)}></textarea>
</div>
</div>
</TabPanel>
<TabPanel value={tabValue} index={1}>this is : Information Personnelle</TabPanel>
<TabPanel value={tabValue} index={2}>this is : Paramètre RH</TabPanel>
<TabPanel value={tabValue} index={3}>this is : Configuration de la paie</TabPanel>
<TabPanel value={tabValue} index={4}>this is : Prêt logement</TabPanel>
</div>
</form>
</div>
</Fragment>
)
};
export default InputEemp;
The TabPanel组件在父级内部声明InputEemp，因此每个渲染周期都会重新创建它。换句话说，每个渲染周期TabPanel is a new反应组件；老人TabPanel组件已卸载，新的TabPanel组件已安装，从而失去了旧组件的焦点。
它通常被认为是在其他 React 组件中定义 React 组件的 React 反模式。
移动TabPanel组件声明outside the InputEemp成分。
Example:
function TabPanel(props) {
const { children, value, index } = props;
return <div>{value === index && <div>{children}</div>}</div>;
}
const InputEemp = (index) => {
/* information publiques */
...
/* end of information publiques */
...
return ( ... );
};
