Почему JavaScript теряет фокус из элемента ввода html, когда я возвращаю компонент ввода из пользовательских React Hooks?

почему фокус теряется от элемента ввода html, когда я возвращаю компонент ввода из пользовательских React Hooks?

Я создал пользовательский хук useInput который возвращает Component , state и state setter

 import React, { useState } from "react"; const useInput = (initialValue = "", label) ={amp}gt; { const [inputState, setInputState] = useState(initialValue); const id = `use-input-${label.replace(" ", "").toLowerCase()}`; const handleInputChange = event ={amp}gt; { console.log("calling"); setInputState(event.target.value); }; const Input = () ={amp}gt; { return ( {amp}lt;label htmlFor={id}{amp}gt; {label} {amp}lt;input className='form-control' value={inputState} onChange={handleInputChange} /{amp}gt; {amp}lt;/label{amp}gt; ); }; return [Input, inputState, setInputState]; }; export default useInput; 

когда я использую этот компонент, как показано ниже, фокус теряется от компонента HTML input .

импорт React из «реакции»;

 import useInput from "./useInput"; function App() { const [TodoTextInput, todoText, setTodoText] = useInput("", "Create Todo"); return ( {amp}lt;{amp}gt; {amp}lt;TodoTextInput /{amp}gt; {todoText} {amp}lt;/{amp}gt; ); } export default App; 

Спасибо

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector