移植Preact库到React遇输入框焦点丢失问题求助

Hey there! I totally get where you're coming from—switching from Preact to React can throw up some unexpected quirks, even when your code worked perfectly before. Let's break down why your input fields are losing focus instead of updating values, and how to fix it.

Common Culprits & Fixes #

1. Unstable or Missing key Props

React relies heavily on key props to track component identity between renders. If your library is rendering form fields without a stable, unique key (like using array indexes or dynamically generated IDs), React will unmount and remount the input components every time state changes—this is exactly what causes the focus loss.

Fix: Use a consistent, unique identifier for each field as its key, like the field's name attribute (since form fields should have unique names anyway):

{formFields.map(field => (
  <FormField key={field.name} {...field} />
))}

2. Defining Components Inside Render Functions

If your library creates component definitions inside the render method (e.g., const Input = () => {} inside a parent component's render), React will treat this as a new component type on every render. This triggers a full unmount/remount cycle, wiping out focus and state.

Fix: Move component definitions outside of any render or useEffect callbacks. Keep them at the top level of your file or in a separate module so they're stable across renders.

3. Mutable State Updates

Preact and React both expect state updates to be immutable, but React's change detection is a bit stricter. If you're directly mutating the state object (instead of returning a new reference), React might not pick up the change correctly, leading to unexpected re-renders or missed updates that indirectly cause focus issues.

Fix: Always return a new object when updating form state:

// ❌ Bad: Mutating existing state
state.formValues[fieldName] = newValue;
setState(state);

// ✅ Good: Immutable update
setState(prevState => ({
  ...prevState,
  formValues: {
    ...prevState.formValues,
    [fieldName]: newValue
  }
}));

4. React StrictMode Interference

If you're using React's StrictMode (enabled by default in many setups like Create React App), it double-renders components in development to catch side effects. This can expose issues that weren't noticeable in Preact, like unintended component re-mounts.

Check: Temporarily disable StrictMode in your root component to see if the focus issue goes away. If it does, you know you need to track down the side effect causing the extra re-mounts.

Why This Happens Between Preact & React #

While Preact and React are very similar, they have subtle differences in how they decide to re-use vs. re-mount components. Preact is a bit more forgiving with dynamic component definitions or unstable keys, but React enforces stricter rules to maintain performance and consistency.

By addressing these points, you should be able to get your form library working smoothly in React just like it did in Preact.

内容的提问来源于stack exchange，提问作者k1r0s