React输入框输入字符时失焦求助：组件重渲染引发焦点丢失

输入框失去焦点的核心原因是每次组件重渲染时，inputs数组里的每个元素的id都是通过Math.random()生成的新值。React依靠key来追踪列表中组件的身份，当key变化时，React会销毁旧的FormInput组件并重新挂载新的实例，这直接导致输入框丢失焦点。

另外，inputs数组定义在ContactForm组件内部，每次组件重渲染时都会重新创建这个数组，虽然这不是焦点丢失的直接原因，但也会带来不必要的性能开销。

1. 替换动态生成的id为固定标识 #

你的每个输入项的name属性已经是唯一的，可以直接用name作为key，或者给每个输入项设置固定的字符串id，彻底避免使用Math.random()生成不稳定的key。

2. 将inputs数组移到组件外部 #

把inputs数组放在ContactForm组件函数外面，这样它只会在组件初始化时创建一次，不会随重渲染重复生成。

修改后的代码如下：

ContactForm.js

// 将inputs数组移到组件外部，避免重复创建
const inputs = [
  {
    id: 'name',
    name: 'name',
    type: 'text',
    placeholder: 'Name'
  },
  {
    id: 'lastname',
    name: 'lastname',
    type: 'text',
    placeholder: 'Last Name'
  },
  {
    id: 'email',
    name: 'email',
    type: 'email',
    placeholder: 'Email'
  },
  {
    id: 'confirmEmail',
    name: 'confirmEmail',
    type: 'email',
    placeholder: 'Confirm Email'
  },
  {
    id: 'message',
    name: 'message',
    type: 'text',
    placeholder: 'Message'
  }
]

const ContactForm = () => {
  const [values, setValues ] = useState({
    name: '',
    lastname: '',
    email: '',
    confirmEmail: '',
    message: ''
  });

  const handleSubmit = (e) => {
    e.preventDefault();
  }

  const onChange = (e) => {
    setValues({...values, [e.target.name]: e.target.value}); 
  }

  console.log(values);
  
  return (
    <form className='contactForm' onSubmit={handleSubmit}>
      {inputs.map((input) => (
        <FormInput 
          key={input.name} // 使用唯一的name作为稳定key
          {...input} 
          value={values[input.name]} 
          onChange={onChange}
        />
      ))}
      <SubmitBtn/>
    </form>
  )
}

FormInput.js（无需修改）

import React from 'react'
import './FormInput.css';

const FormInput = (props) => {
  const { id, onChange, ...inputProps } = props;

  return (
    <div className='formInput'>
      <input {...inputProps} onChange={onChange} />
    </div>
  )
}

export default FormInput

不需要刻意阻止组件重渲染——React的重渲染是正常机制，只要保证key稳定，组件就不会被不必要地卸载/挂载，输入框自然能保持焦点。上述修改既解决了焦点丢失问题，也优化了组件的渲染性能。

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