React Js, мой ввод теряет фокус при рендеринге

эй, я новичок в реакции 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.info(res.data);
                }); */
            window.location = ('/');
        } catch (err) {
            console.info(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;

javascript reactjs tabs appbar

12.05.2022 13:32

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Проблема

Компонент TabPanel объявлен внутри родительского InputEemp, поэтому он воссоздается каждый цикл рендеринга. Другими словами, каждый цикл рендеринга каждого TabPanel является компонентом новый React; старый компонент TabPanel размонтируется, а новый компонент TabPanel монтируется, таким образом теряется фокус старого.

Обычно это считается анти-шаблоном React для определенных компонентов 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 ( ... );
};

Edit react-js-my-input-losing-focus-when-rendering