React动态添加组件时输入框频繁失焦问题排查

Hey there! I’ve run into this exact frustrating issue before—nothing kills user experience like typing into an input only to have it lose focus mid-entry. Let’s break down why this is happening and walk through concrete fixes.

The Root Cause #

You nailed the diagnosis: your MultipleInputChoiceList component is getting fully unmounted and re-mounted whenever props update. This happens because it’s being rendered via a conditionally created Higher-Order Component (HOC). When React detects a new component type (even if it’s the same base component wrapped in a fresh HOC instance), it tears down the old DOM tree and builds a new one—resetting all input states and yanking focus away.

Step-by-Step Solutions #

1. Stop Recreating the HOC Inside Render #

If you’re wrapping your component inside the parent’s render method, that’s the main culprit. This code will trigger re-mounts every time the parent renders:

// ❌ Bad: HOC is recreated on every render cycle
render() {
  const WrappedComponent = someCondition ? withMyHOC(MultipleInputChoiceList) : MultipleInputChoiceList;
  return <WrappedComponent {...this.props} />;
}

Fix: Move the HOC wrapping outside the component’s render logic (or even outside the component entirely) so it’s only created once:

// ✅ Good: HOC is created once, component type stays stable
const WrappedMultipleInputChoiceList = withMyHOC(MultipleInputChoiceList);

class ParentComponent extends React.Component {
  render() {
    return someCondition ? (
      <WrappedMultipleInputChoiceList {...this.props} />
    ) : (
      <MultipleInputChoiceList {...this.props} />
    );
  }
}

Now React recognizes the component type as consistent and won’t unmount/re-mount it unnecessarily.

2. Use Stable Keys for Dynamic List Items #

When rendering your dynamic select/input pairs, never use array indexes as the key prop (they shift when items are added/removed, causing React to re-render the wrong elements). Instead, use a unique, unchanging identifier from your Redux state—like a UUID or incrementing ID for each pair:

// ✅ Stable key using item ID from Redux state
{this.props.inputPairs.map(pair => (
  <SelectInputPair 
    key={pair.id} 
    selectValue={pair.selectVal} 
    inputValue={pair.inputVal} 
    onChange={handlePairUpdate} 
  />
))}

This ensures React only updates the specific items that change, rather than rebuilding the entire list.

3. Optimize Component Updates #

• Class Components: Extend React.PureComponent (which does shallow prop comparison) or implement shouldComponentUpdate to only re-render when relevant props actually change.
• Function Components: Wrap MultipleInputChoiceList with React.memo and add a custom comparison function if needed, to skip re-renders when props haven’t changed meaningfully:

  const MemoizedMultipleInputChoiceList = React.memo(MultipleInputChoiceList, (prevProps, nextProps) => {
    // Return true to skip re-render if props are functionally identical
    return prevProps.inputPairs.length === nextProps.inputPairs.length &&
           prevProps.inputPairs.every((pair, idx) => pair.id === nextProps.inputPairs[idx].id);
  });
  

• Redux Reducer Tweaks: Ensure your reducer doesn’t return an entirely new state object when only one pair changes. Use immutable updates but avoid deep-copying the entire state unless necessary—this prevents unnecessary prop changes from triggering component updates.

Final Notes #

Combining these fixes should eliminate the focus loss entirely. The core idea is to keep your component types stable, use proper keys for dynamic elements, and minimize unnecessary re-renders/unmounts.

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