React输入框失焦问题：输入单字符后光标消失的解决方案咨询

Hey there! I totally get how frustrating this bug is—you’ve got most of your inputs working perfectly with the same handler, but this one just refuses to behave, losing focus after a single character. Let’s break this down and fix it while keeping your name variable intact.

The Root Cause #

You’re exactly right: the conflict between your state variable named name and the input’s name="name" attribute is throwing off React’s form handling. When you update the state, React re-renders the component, and the overlapping names can cause unexpected behavior like cursor loss, even if your handler works for other inputs.

Feasible Solutions (No Need to Rename Your name Variable) #

1. Rename the Input’s name Attribute (Simplest Fix)

Instead of using name="name" for the input, pick a unique alias (like eventTypeName). Then, in your handler, just map this alias back to your name variable when updating state.

Here’s how to adjust your input:

<input 
  key={['event', indexEventType].join('_')} 
  type="text" 
  name="eventTypeName" {/* Unique alias instead of "name" */}
  defaultValue={eventType.name} 
  style={{ width: '100%' }} 
  onChange={(e) => this.handleChangeEventType(e, indexEventType)} 
/>

Then update your handler to target the name variable regardless of the input’s name attribute:

handleChangeEventType = (e, indexEventType) => {
  const inputValue = e.target.value;
  // Update the correct "name" field in your state
  const updatedEventTypes = [...this.state.eventTypes];
  updatedEventTypes[indexEventType] = {
    ...updatedEventTypes[indexEventType],
    name: inputValue // Keep using your "name" variable here
  };
  this.setState({ eventTypes: updatedEventTypes });
}

This avoids the name conflict entirely while keeping your name variable intact.

2. Switch to a Controlled Component

If you prefer to keep name="name", convert the input to a controlled component by using value instead of defaultValue. This ensures the input always syncs with your state, which can resolve the cursor disappearance issue.

Adjust your input like this:

<input 
  key={['event', indexEventType].join('_')} 
  type="text" 
  name="name" 
  value={eventType.name} {/* Bind directly to state */}
  style={{ width: '100%' }} 
  onChange={(e) => this.handleChangeEventType(e, indexEventType)} 
/>

Make sure your handler correctly updates the state (which you said it already does for other inputs)—this will keep the input in sync and prevent cursor loss.

3. Manually Preserve Cursor Position (Last Resort)

If the above options don’t work for some reason, you can manually save and restore the cursor position in your handler. This is a bit hacky but effective:

handleChangeEventType = (e, indexEventType) => {
  const inputElement = e.target;
  const cursorPos = inputElement.selectionStart;

  const inputValue = e.target.value;
  const updatedEventTypes = [...this.state.eventTypes];
  updatedEventTypes[indexEventType] = {
    ...updatedEventTypes[indexEventType],
    name: inputValue
  };

  // Restore cursor position after state updates
  this.setState({ eventTypes: updatedEventTypes }, () => {
    inputElement.selectionStart = cursorPos;
    inputElement.selectionEnd = cursorPos;
  });
}

Final Recommendation #

Go with option 1—it’s clean, straightforward, and eliminates the conflict without any workarounds. You get to keep your name variable, and the input will behave just like your others.

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