本文深入探讨React中输入框在键入字符后失去焦点的常见问题。该问题通常源于受控组件的value属性与频繁更新的全局状态直接绑定，导致不必要的组件重渲染。文章将提供详细的解决方案，包括使用组件内部局部状态管理输入值，并仅在必要时（如失焦或提交时）更新外部状态，从而有效避免焦点丢失，提升用户体验。
理解问题根源：频繁重渲染与焦点丢失
在react中，受控组件（controlled components）是处理表单输入数据的推荐方式。它们通过将表单元素的值绑定到组件的state，并通过onchange事件处理器来更新这个state，从而使react成为“单一数据源”。然而，当受控组件的value属性直接绑定到一个频繁更新的外部状态（例如，父组件的datasource），并且onchange事件在每次按键时都触发这个外部状态的更新时，就可能导致输入框失去焦点。
其核心原因在于：
- 全局状态更新触发重渲染：当onChange事件触发setDataSource时，dataSource状态被更新。这会导致持有dataSource状态的父组件及其所有依赖dataSource的子组件（包括输入框所在的gridTemplate）进行重新渲染。
- dom元素重构或更新：在某些情况下，尤其是在列表或复杂组件中，重新渲染可能导致输入框对应的DOM元素被重新创建或更新，从而导致浏览器认为当前焦点已丢失。即使值被正确更新，焦点也无法保留在输入框内。
考虑以下原始代码片段：
// State to store DataSource in a parent component const [dataSource, setDataSource] = useState<any>(data); // Handler to update dataSource on every change const handleOnchange = (event: any, props: any) => { const newData = [...dataSource]; const itemIndex = newData.findIndex( (item) => item.OrderID === props.OrderID ); // Problematic line: Directly updates and sets the global dataSource on every keystroke newData[itemIndex].Freight = event.target.value; setDataSource(newData); }; // Custom Grid Component that renders an input const gridTemplate = (props: any) => { const val = props.Freight; // val directly comes from dataSource return ( <div> {/* Input value is tied to props.Freight, onChange updates dataSource */} <input value={val} onChange={(event) => handleOnchange(event, props)} /> </div> ); };
在这个例子中，gridTemplate组件接收props.Freight作为输入框的值。当用户在输入框中键入一个字符时，onChange事件触发handleOnchange函数。handleOnchange会立即更新dataSource状态，进而导致整个dataSource被重新设置。如果gridTemplate是作为列表项渲染的，那么dataSource的更新很可能导致整个列表或至少当前的gridTemplate组件重新渲染，从而使输入框失去焦点。
解决方案：分离输入框的局部状态与外部数据源
解决此问题的关键在于：让输入框自身管理其即时输入值，而仅在用户完成输入（例如，输入框失去焦点onBlur、按下回车键onKeyDown或点击保存按钮）时，才将最终值同步到外部的dataSource。
以下是具体的实现步骤和示例代码：
-
在输入框所在的组件（例如gridTemplate）内部维护局部状态： 使用useState钩子在gridTemplate组件内部声明一个状态，用于存储输入框的当前值。onChange事件将只更新这个局部状态，而不会立即触发表格或父组件的重渲染。
-
使用useEffect同步外部属性到内部状态（可选但推荐）： 当gridTemplate组件的props.Freight（即来自dataSource的初始值或外部更新的值）发生变化时，useEffect可以确保内部的inputValue状态得到及时更新，从而保证数据的一致性。
-
在特定时机（如失焦或提交）更新外部数据源： 使用onBlur事件来监听输入框失去焦点的时机，或者使用onKeyDown事件监听特定的按键（如Enter键），此时才调用父组件传递下来的函数，将局部状态的最终值同步回dataSource。
以下是修改后的代码示例：
import React, { useState, useEffect, useCallback } from 'react'; // 假设这是您的父组件或数据源管理部分 const ParentComponent = () => { const [dataSource, setDataSource] = useState([ { OrderID: 1, Freight: 100.00 }, { OrderID: 2, Freight: 250.50 }, { OrderID: 3, Freight: 120.00 }, ]); // 这个函数现在只在输入框失焦或用户明确提交时调用 const updateDataSourceFreight = useCallback((orderId: number, newFreight: number) => { setDataSource(prevDataSource => { const newData = [...prevDataSource]; const itemIndex = newData.findIndex(item => item.OrderID === orderId); if (itemIndex > -1) { newData[itemIndex].Freight = newFreight; } return newData; }); }, []); // 依赖项为空数组，表示此函数在组件生命周期内是稳定的 // Custom Grid Component - 封装输入框逻辑 const GridTemplate = React.memo((props: any) => { // 使用局部状态管理输入框的即时值 const [inputValue, setInputValue] = useState(String(props.Freight)); // 确保初始值是字符串 // 当外部props.Freight变化时，更新内部inputValue useEffect(() => { setInputValue(String(props.Freight)); }, [props.Freight]); // 键入时只更新局部状态 const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => { setInputValue(event.target.value); }; // 失焦时才将最终值同步到外部数据源 const handleInputBlur = () => { // 确保转换成正确的类型，这里假设Freight是数字 const parsedValue = parseFloat(inputValue); if (!isNaN(parsedValue)) { props.onUpdateFreight(props.OrderID, parsedValue); } else { // 处理无效输入，例如恢复到原始值或给出提示 console.warn(`Invalid input for OrderID ${props.OrderID}: ${inputValue}. Reverting to original value.`); setInputValue(String(props.Freight)); // 恢复到上次有效值 } }; // 也可以在按下Enter键时触发更新 const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => { if (event.key === 'Enter') { const parsedValue = parseFloat(inputValue); if (!isNaN(parsedValue)) { props.onUpdateFreight(props.OrderID, parsedValue); event.currentTarget.blur(); // 触发失焦，以便键盘隐藏或焦点移开 } else { console.warn(`Invalid input for OrderID ${props.OrderID}: ${inputValue}. Reverting to original value.`); setInputValue(String(props.Freight)); } } }; return ( <div style={{ padding: '5px', border: '1px solid #eee', margin: '5px' }}> <span>Order ID: {props.OrderID} - Freight: </span> <input type="text" // 使用text以允许输入小数和负号，然后在onBlur/onKeyDown时解析 value={inputValue} onChange={handleInputChange} onBlur={handleInputBlur} onKeyDown={handleKeyDown} style={{ marginLeft: '5px' }} /> </div> ); }); return ( <div> <h3>Order List</h3> {dataSource.map(item => ( <GridTemplate key={item.OrderID} // 列表渲染必须提供唯一的key OrderID={item.OrderID} Freight={item.Freight} onUpdateFreight={updateDataSourceFreight} /> ))} <h4>Current Data Source:</h4> <pre class="brush:php;toolbar:false">{JSON.stringify(dataSource, null, 2)}
); }; // 假设这是应用程序的根组件，渲染 ParentComponent const App
