react框架文档 react文本框内输入回车不能换行

论文深入探讨React中输入框在键入字符后失去焦点的常见问题。该问题通常源于受控组件的值属性与间隙更新的全局状态直接绑定，导致不必要的组件重渲染。文章将提供详细的解决方案，包括使用组件内部局部状态管理输入值，并仅在必要时（如焦或提交时）更新外部状态，从而有效避免焦点丢失，提升用户体验。理解问题根源：墙壁重渲染与焦点丢失

在react中，受控组件（受控）它们是处理表单元素输入数据的推荐方式。它们通过将表单元素的值绑定到组件的状态，并通过onchange事件处理器来更新这个状态，从而使react成为“单一数据源”。然而，当受控组件的value属性直接绑定到一个紧密更新的外部状态（例如，组件父的数据源），而onchange事件在每次按钮时都触发这个外部状态的更新时，就可能导致输入框失去焦点。

其核心原因是：全局状态更新触发重渲染：当onChange事件触发setDataSource时，dataSource状态被更新。这会导致持有dataSource状态的父组件以及所有依赖dataSource的子组件（包括输入框所在的gridTemplate）进行重新渲染。DOM元素重构或更新：在某些情况下，尤其是在列表或复杂组件中，重新渲染可能导致输入框对应的DOM元素被重新创建或更新，从而导致浏览器认为当前焦点丢失。即使值被正确更新，焦点也无法保留在输入框已内。

考虑以下原始代码片段：// 在父组件中存储 DataSource 的状态 const [dataSource， setDataSource] = useStatelt；anygt；(data)；// 处理程序在每次更改时更新 dataSource const handleOnchange = (event： any， props： any) =gt； { const newData = [...dataSource]； const itemIndex = newData.findIndex( (item) =gt； item.OrderID === props.OrderID )； // 有问题的行：每次按键时直接更新并设置全局 dataSource newData[itemIndex].Freight = event.target.value； setDataSource(newData)；}；// 渲染输入的自定义网格组件 const gridTemplate = (props： any) =gt； { const val = props.Freight； // val 直接来自 dataSource return ( lt；divgt； {/* 输入值与 props.Freight 绑定， onChange 更新 dataSource */} lt；输入值={val} onChange={(event) =gt；handleOnchange(event， props)} /gt；lt；/divgt； )；}；登录后复制

在这个例子中，gridTemp组件接收props.Freight作为输入框的值。当用户在输入框输入一个字符时，onChange事件触发handleOnchange函数。handleOnchange会立即更新dataSo urce状态，首先导致整个dataSource被重新设置。如果gridTemplate是列表项渲染的，那么dataSource的更新很可能导致整个列表或当前的gridTemplate组件重新渲染，从而使输入框失去焦点。解决方案：分离输入框的局部状态与外部部分数据源

解决此问题的关键在于：让输入自行管理其即时输入值，而只有在用户完成输入（例如，输入框失去焦点onBlur、按回车键onKeyDown或点击保存按钮）时，才将最终值同步到外部的数据源。

以下是具体的实现步骤和示例代码：

在输入框所在的组件（例如gridTemplate）内部维护局部状态：使用useState钩子在gridTemplate组件内部声明一个状态，用于存储输入框的当前值。onChange事件只会更新这个局部状态，而不会立即触发表单或父组件的重渲染。

使用useEffect同步外部属性到内部状态（可选但推荐）：当gridTemplate组件的props.Freight（即来自dataSource的初始值或外部更新的值）发生变化时，useEffect可以保证内部的inputValue状态得到及时更新，从而保证数据的一致性。

在特定时机（如失焦或提交）更新外部数据源：使用onBlur事件来监听输入框失去焦点的时机，或者使用onKeyDown事件监听特定的按键（如Enter键），此时才调用父组件传下来的函数，将局部状态的最终值同步回数据源。

以下是修改后的代码示例：import React， { useState， useEffect， useCallback } from 'react'；//假设是您的父组件或数据源管理部分 const ParentComponent = () =gt； { 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) =gt； { setDataSource(prevDataSource =gt； { const newData = [...prevDataSource]； const itemIndex = newData.findIndex(item =gt； item.OrderID === orderId)； if (itemIndex gt； -1) { newData[itemIndex].Freight = newFreight； } return newData； })； }， [])； // 依赖项为空队列，表示此函数在组件生命周期内是稳定的 // 自定义网格组件 - 输入封装框逻辑 const GridTemplate = React.memo((props： any) =gt； { // 使用局部状态管理输入框的即时值 const [inputValue， setInputValue] = useState(String(props.Freight))； // 确定初始值是字符串 // 当外部props.Freight变化时，更新内部inputValue useEffect(() =gt； { setInputValue(String(props.Freight))； }， [props.Freight])； // 键入时只更新局部状态 const handleInputChange = (event： React.ChangeEventlt；HTMLInputElementgt；) =gt； { setInputValue(event.target.value)； }； // 焦失时才将最终值同步到外部数据源 const handleInputBlur = () =gt； { //确保转换成正确的类型，这里假设Freight是数字 const parsedValue = parseFloat(inputValue)； if (!isNaN(parsedValue)) { props.onUpdateFrei

ght(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.KeyboardEventlt；HTMLInputElementgt；) =gt； { if (event.key === 'Enter') { const parsedValue = parseFloat(inputValue)； if (!isNaN(parsedValue)) { props.onUpdateFreight(props.OrderID， parsedValue)； event.currentTarget.blur()； // 触发失焦，避免键盘隐藏或焦点移开 } else { console.warn(`OrderID 输入无效${props.OrderID}：${inputValue}。恢复原值`)； setInputValue(String(props.Freight))； } } }； return ( lt；div style={{ padding： '5px'， border： '1px Solid #eee'， margin： '5px' }}gt； lt；spangt；订单 ID： {props.OrderID} - 运费： lt；/spangt； lt；输入类型=“；text”； // 使用text允许输入小数和负号，然后在onBlur/onKeyDown时解析 value={inputValue} onChange={handleInputChange} onBlur={handleInputBlur} onKeyDown={handleKeyDown} style={{ marginLeft： '5px' }} /gt； lt；/divgt； )； })； return ( lt；divgt； lt；h3gt；Order Listlt；/h3gt； {dataSource.map(item =gt； ( lt；GridTemplate key={item.Order

ID} // 列表渲染必须提供唯一的key OrderID={item.OrderID} Freight={item.Freight} onUpdateFreight={updateDataSourceFreight} /gt； ))} lt；h4gt；当前数据源：lt；/h4gt； lt；pre class=quot；brush：php；toolbar：falsequot；gt；{JSON.stringify(dataSource， null， 2)}登录后复制)；}；//假设是应用程序的根组件，渲染ParentComponentconst App

以上就是React输入框在键入字符后失去焦点：深入理解解决方案的详细内容，更多请关注乐哥常识网文章相关！