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

Question

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

import React, { useState } from "react";

const useInput = (initialValue = "", label) => {
  const [inputState, setInputState] = useState(initialValue);
  const id = `use-input-${label.replace(" ", "").toLowerCase()}`;
  const handleInputChange = event => {
    console.log("calling");

    setInputState(event.target.value);
  };
  const Input = () => {
    return (
      <label htmlFor={id}>
        {label}
        <input
          className='form-control'
          value={inputState}
          onChange={handleInputChange}
        />
      </label>
    );
  };
  return [Input, inputState, setInputState];
};

export default useInput;

, когда я использую этот компонент, как показано ниже, focus Свободныйиз компонента HTML input.

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

import useInput from "./useInput";
function App() {
  const [TodoTextInput, todoText, setTodoText] = useInput("", "Create Todo");
  return (
    <>
      <TodoTextInput />
      {todoText}
    </>
  );
}

export default App;

Спасибо

Answer 1

Вы воссоздаете компонент Input на каждом рендере. Вместо этого визуализируйте входные данные в useInput и используйте визуализированный экземпляр в App:

const { useState } = React;

const useInput = (initialValue = "", label) => {
  const [inputState, setInputState] = useState(initialValue);
  const id = `use-input-${label.replace(" ", "").toLowerCase()}`;
  const handleInputChange = event => {
    console.log("calling");

    setInputState(event.target.value);
  };
  // render the input
  const input = (
    <label htmlFor={id}>
      {label}
      <input
        className="form-control"
        value={inputState}
        onChange={handleInputChange}
      />
    </label>
  );
  
  return [input, inputState, setInputState];
};

function App() {
  const [todoTextInput, todoText, setTodoText] = useInput("", "Create Todo");
  return (
    <React.Fragment>
      {todoTextInput /* use the rendered instance */}
      {todoText}
    </React.Fragment>
  );
}

ReactDOM.render(
  <App />,
  root
);

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="root"></div>