Поле ввода React теряет фокус после нажатия клавиши в динамически сгенерированном дочернем элементе

Question

У меня есть приложение React (с использованием только функциональных компонентов), в котором я передаю состояние (объект JavaScript) дочернему элементу, который использует array.map() для передачи этого состояния другим дочерним элементам (динамически), где состояние изменяется обработчик активируется, чтобы вернуть изменение состояния обратно к основному компоненту. Но когда я пытаюсь ввести поле ввода в любом динамически созданном дочернем элементе, поле теряет фокус. Эта проблема не возникает, если у меня есть прямой дочерний элемент, который не создается динамически с помощью операции с массивом.

Вот небольшой пример проблемы с использованием фиктивных компонентов для иллюстрации...

    // Comp1
     
    import { useState } from 'react';
    import Comp2 from './Comp2';
     
    const Comp1 = () => {
      const [formData, setFormData] = useState({
        status: '',
        location: ''
      });
     
      const handleChange = e => {
        setFormData({...formData}, [e.target.name]: e.target.value});
      }
     
      return (
        <Comp2 handleChange={handleChange} formData={formData}/>
      )
    };
     
    export default Comp1;
     
     
    // Comp2
     
    import formInputs from './formInputs.js';
    import { v4 as uuidv4 } from 'uuid';
    import Comp3 from './Comp3';
     
    const Comp2 = ({ handleChange, formData }) => {
      return (
        <>
          {formInputs
            .map(input => {
              return (
                <Comp3
                  key={uuidv4()}
                  status={input.status}
                  location={input.location}
                  name={input.name}
                  handleChange={handleChange}
                  formData={formData}
                />
              );
            })}
        </>
      );
    };
     
    export default Comp2;
     
     
     
    // Comp3
     
    import { useState } from 'react';
     
    const Comp3 = props => {
      const { status, location, name, handleChange, formData } = props;
     
      return (
        <>
          <input
            type="text"
            name={name}
            placeholder="enter status"
            name={status}
            onChange={handleChange}
            value={formData[name]}
          />
          <p>{location}</p>
        </>
      );
    };
     
    export default Comp3;

Итак, когда я ввожу первый символ в поле ввода в Comp3, поле ввода теряет фокус, и мне приходится снова щелкать его, чтобы ввести следующий символ, и так далее. Я точно не видел решения этой проблемы... кто-нибудь знает, что я делаю неправильно... есть ли какой-то крючок или какая-то техника, которую я здесь упускаю, которая исправит это? Заранее спасибо.

Поле ввода React теряет фокус после нажатия клавиши в динамически сгенерированном дочернем элементе

Ответы (0)