React Hooks - 输入 1 个字符时，输入失去焦点 [英] React Hooks - Input loses focus when 1 character is typed in

问题描述

我正在使用 React Hooks - 重写表单以使用钩子概念.一切都按预期工作，除了一旦我在输入中输入任何 1 个字符，输入就会失去焦点.

I'm playing with React Hooks - rewriting a form to use hook concepts. Everything works as expected except that once I type any 1 character into the input, the input loses focus.

我猜是组件外部不知道组件内部变化的问题，但是我该如何解决这个问题?

I guess there is a problem that the outside of the component doesn't know about the internal changes in the component, but how do I resolve this issue?

这是 useForm 钩子:

Here is the useForm Hook:

import React, { useState } from "react";

export default function useForm(defaultState, label) {
  const [state, setState] = useState(defaultState);

  const FormComponent = () => (
    <form>
      <label htmlFor={label}>
        {label}
        <input
          type="text"
          id={label}
          value={state}
          placeholder={label}
          onChange={e => setState(e.target.value)}
        />
      </label>
    </form>
  );

  return [state, FormComponent, setState];
}

这是使用 Hook 的组件:

Here is the component that uses the Hook:

function App() {
  const [formValue, Form, setFormValue] = useForm("San Francisco, CA", "Location");

  return (
    <Fragment>
      <h1>{formValue}</h1>
      <Form />
    </Fragment>
  );
}

推荐答案

虽然 Kais 的回答可以解决症状，但它不会解决问题.如果有多个输入，它也会失败 - 那么哪个应该自动聚焦于重新渲染?

While answer by Kais will solve the symptoms, it will leave the cause unaddressed. It will also fail if there are multiple inputs - which one should autofocus itself on rerender then?

当您在另一个函数的作用域内定义一个组件 (FormComponent) 时，会发生该问题，该函数在您的 App 组件的每个渲染中都被调用.每次您的 App 组件被重新渲染并调用 useState 时，这都会为您提供一个全新的 FormComponent.那么，那个新组件就没有焦点了.

The issue happens when you define a component (FormComponent) inside the scope of another function which is called each render of your App component. This gives you a completely new FormComponent each time your App component is rerendered and calls useState. That new component is then, well, without focus.

就我个人而言，我会再次从钩子中返回组件.我会改为定义一个 FormComponent 组件，并且只从 useForm 状态返回状态.

Personally I would feel agains returning components from a hook. I would instead define a FormComponent component, and only return state from useForm state.

但是，最接近原始代码的工作示例可能是:

But, a working example closest to your original code could be:

// useForm.js
import React, { useState } from "react";

// Define the FormComponent outside of your useForm hook
const FormComponent = ({ setState, state, label }) => (
  <form>
    <label htmlFor={label}>
      {label}
      <input
        type="text"
        id={label}
        value={state}
        placeholder={label}
        onChange={e => setState(e.target.value)}
      />
    </label>
  </form>
);

export default function useForm(defaultState, label) {
  const [state, setState] = useState(defaultState);

  return [
    state,
    <FormComponent state={state} setState={setState} label={label} />,
    setState
  ];
}

// App.js
import useForm from "./useForm";

export default function App() {
  const [formValue, Form] = useForm("San Francisco, CA", "Location");

  return (
    <>
      <h1>{formValue}</h1>
      {Form}
    </>
  );
}

这是一个沙箱

这篇关于React Hooks - 输入 1 个字符时，输入失去焦点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！