React Js，我的输入在渲染时失去焦点

Question

嘿，我是 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 />&nbsp;&nbsp;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;

Answer 1

问题

TabPanel 组件在父组件 InputEemp 内声明，因此每个渲染周期都会重新创建它。换句话说，每个渲染周期每个 TabPanel 都是一个 new React 组件；旧的 TabPanel 组件被卸载并安装了新的 TabPanel 组件，因此失去了旧组件的焦点。

它通常被认为是 React anti-pattern 在其他 React 组件中定义 React 组件。

解决方案

将 TabPanel 组件声明移到 InputEemp 组件之外。

示例：

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 ( ... );
};

React Js，我的输入在渲染时失去焦点

React Js, my input losing focus when rendering

javascript

tabs

appbar

reactjs

问题

解决方案