为什么React输入元素在嵌套在组件中时会失去焦点？

React输入元素在嵌套在组件中时会失去焦点的原因是因为React的组件重新渲染时会导致输入元素被重新创建，从而失去焦点。

具体来说，当React组件重新渲染时，组件的虚拟DOM会与之前的虚拟DOM进行比较，找出需要更新的部分进行重新渲染。在这个过程中，如果输入元素所在的组件发生了更新，React会销毁原有的输入元素并重新创建一个新的输入元素，这就导致了输入元素失去焦点的问题。

为了解决这个问题，可以使用React的key属性来唯一标识每个组件，确保组件的稳定性，从而避免重新创建输入元素。通过给组件添加一个唯一的key值，React在进行虚拟DOM比较时就能够正确地识别出哪些组件需要更新，哪些组件需要重新创建。

另外，还可以使用React的ref属性来引用输入元素，并在组件重新渲染后重新聚焦该输入元素。通过在组件的生命周期方法中使用ref属性，可以在组件更新后获取到之前的输入元素引用，并手动调用聚焦方法，使输入元素保持焦点。

总结起来，React输入元素在嵌套在组件中时会失去焦点是因为组件重新渲染导致输入元素被重新创建。为了解决这个问题，可以使用key属性确保组件的稳定性，同时使用ref属性在组件更新后重新聚焦输入元素。