理解问题根源：频繁重渲染与焦点丢失
在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(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 ( {/* Input value is tied to props.Freight, onChange updates dataSource */} handleOnchange(event, props)} />); };
在这个例子中，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) => {
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) => {
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 (
Order ID: {props.OrderID} - Freight:
);
});
return (
Order List
{dataSource.map(item => (
Current Data Source:
{JSON.stringify(dataSource, null, 2)}
);
};
// 假设这是应用程序的根组件，渲染 ParentComponent
const App
相关文章
什么是高阶函数_如何在javascript中应用它们【教程】
将播放/暂停双按钮合并为单个切换按钮，实现状态感知的计时器控制
JavaScript JSON如何操作_如何进行序列化和解析【教程】
javascript如何进行表单验证_正则表达式如何提高验证效率【教程】
垃圾回收在javascript中如何工作_怎样编写高效代码【教程】
本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
热门AI工具
更多
