React中Input组件未嵌套时为何失焦？如何处理状态更新？

焦点丢失的核心原因 #

你遇到的输入框失焦问题，本质是不必要的组件重渲染/卸载导致的，和你加的固定key无关——反而那些硬加的固定key可能干扰了React的diff算法。另外，handleChange的实现如果有问题，也会导致状态频繁更新触发重渲染。

具体修复步骤 #

1. 移除不必要的固定key
   给单个组件（比如App的顶层div、Modal、ModalBody）加固定key完全没必要，React会自动根据组件类型和位置识别。把这些key删掉，同时给Input组件设置语义化的稳定key：

// App组件修改后的返回部分
return (
    <div className='container'>
        <Modal
            show={openModal}
            title="Edit User"
            close={() => setOpenModal(false)}
        >
            <ModalBody>
                <ModalText
                    kind={modalTextKind}
                    currentUser={currentUser}
                />
                <Input
                    key="name-input"
                    label='Name'
                    type='text'
                    name='name'
                    value={inputFields.name}
                    placeholder="Full Name"
                    isInvalid={emptyInputFields.name}
                    state={setInputFields}
                />
                <Input
                    key="age-input"
                    label='Age'
                    type='number'
                    name='age'
                    value={inputFields.age}
                    placeholder="How old is this one?"
                    isInvalid={emptyInputFields.age}
                    state={setInputFields}
                />
            </ModalBody>
        </Modal>
    </div>
)

2. 确保handleChange正确合并状态
   检查你的handleChange函数，必须用函数式更新合并状态，避免覆盖其他字段：

// Helpers.js中的handleChange实现
export const handleChange = (e, setState) => {
    const { name, value } = e.target;
    setState(prevState => ({
        ...prevState,
        [name]: value
    }));
};

如果之前的实现是直接替换整个状态对象，会清空inputFields里的其他字段，导致状态频繁异常更新，触发更多重渲染。

3. 调整Modal组件的显隐方式
   如果你的Modal是用条件渲染（比如{openModal && <Modal>}），每次开关都会导致Modal被完全卸载再挂载，必然引发输入框失焦。改成用CSS控制显隐（比如给Modal加hidden类，设置display: none或opacity: 0），让Modal始终存在于DOM中，仅通过样式控制视觉显示。

关于Redux的使用 #

完全没必要现在就引入Redux。你的场景是单个父组件管理表单状态，属于典型的状态提升场景，修复上述重渲染问题后就能正常工作。只有当后续表单变得复杂，或者多个无关组件需要共享该状态时，再考虑用Redux或Context API做全局状态管理。

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