React聊天应用新建弹窗输入框OnChange失效 无法获取输入文本

出现输入框无法输入、提交时取不到输入值的核心原因，和react-confirm-alert的渲染机制直接相关：

• 该组件的自定义弹窗UI是通过React Portal挂载到文档根节点的，在你调用createChat()触发弹窗弹出的瞬间，就完成了首次DOM渲染，整个渲染过程会捕获调用时刻的状态、函数引用的旧值
• 你把输入框绑定到了HeaderChats组件外层的chatName state上，当你在输入框敲字触发onChange调用setChatName时，只会触发HeaderChats组件自身的重渲染；但已经挂载到Portal里的弹窗DOM不会随着外层组件的重渲染同步更新，它拿到的value={chatName}永远是弹窗首次弹出时的空字符串，直接把输入的内容覆盖掉，表现就是完全输入不进去文字
• 就算换用defaultValue写法，也只会在弹窗首次挂载时取一次值，后续的输入变化因为没有触发弹窗自身的重渲染，提交时的回调闭包根本拿不到实时的输入内容
  另外你声明state时用var的写法不符合React规范，虽然不会直接触发bug，但建议统一用const声明解构出来的state变量。

不要把弹窗内的临时输入状态和外层HeaderChats组件的state绑定，把整个弹窗的状态管理、提交逻辑全部收敛到customUI的内部作用域里维护，这样状态更新只会触发弹窗自身的重渲染，不需要依赖外层组件的状态同步，具体修改如下：

1. 移除HeaderChats组件里全局的chatName state和原onSubmit逻辑
2. 在customUI内部声明专属的输入状态、提交处理函数
3. 提交成功后调用外层传入的onAddNewChat方法，再手动关闭弹窗
4. 给Cancel按钮补充type="button"属性，避免按钮默认触发表单提交的行为

修改后的核心代码片段：

// 移除HeaderChats外层的 const [chatName, setChatName] = useState(''); 和原onSubmit函数
function createChat() {
    confirmAlert({
        customUI: ({ onClose }) => {
            // 弹窗内部维护输入状态，同步触发弹窗自身重渲染
            const [innerChatName, setInnerChatName] = useState('');

            const handleSubmit = (e) => {
                e.preventDefault();
                if (!innerChatName.trim()) {
                    alert('Please write the name of the chat!');
                    return;
                }
                onAddNewChat(innerChatName.trim());
                onClose();
            }

            return (
                <div className='custom-ui'>
                    <h1>Create new chat</h1>
                    <form style={{resize: "vertical"}} onSubmit={handleSubmit}>
                        <label className="cname-label">Chat Name</label>
                        <input 
                            className="cname-input" 
                            type='text' 
                            placeholder="Type the name of the chat..." 
                            onChange={(e) => setInnerChatName(e.target.value)} 
                            value={innerChatName}
                        />
                        <button type="button" className="cancel-button" onClick={onClose}>Cancel</button>
                        <button className="submit-new-chat-button" type='submit'>Create now</button>
                    </form>
                </div>
            )
        }
    })
}

注意事项 #

• 跨Portal的状态同步非常容易出现闭包捕获旧值的问题，所有弹窗内的临时交互状态，都优先在弹窗自身的作用域里维护，不要绑定到外层页面组件的state上
• 受控组件的value值必须和实际触发更新的状态属于同一个组件渲染树，否则就会出现输入被强制清空的问题

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