React输入框失焦问题解决方法

golang学习网今天将给大家带来《React输入框输入后失焦问题解析》，感兴趣的朋友请继续看下去吧！以下内容将会涉及到等等知识点，如果你是正在学习文章或者已经是大佬级别了，都非常欢迎也希望大家都能给我建议评论哈~希望能帮助到大家！

理解问题根源：频繁重渲染与焦点丢失

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

其核心原因在于：

1. 全局状态更新触发重渲染：当onChange事件触发setDataSource时，dataSource状态被更新。这会导致持有dataSource状态的父组件及其所有依赖dataSource的子组件（包括输入框所在的gridTemplate）进行重新渲染。
2. 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 */}
      &lt;input value={val} onChange={(event) =&gt; handleOnchange(event, props)} />
    </div>
  );
};

在这个例子中，gridTemplate组件接收props.Freight作为输入框的值。当用户在输入框中键入一个字符时，onChange事件触发handleOnchange函数。handleOnchange会立即更新dataSource状态，进而导致整个dataSource被重新设置。如果gridTemplate是作为列表项渲染的，那么dataSource的更新很可能导致整个列表或至少当前的gridTemplate组件重新渲染，从而使输入框失去焦点。

解决方案：分离输入框的局部状态与外部数据源

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

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

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

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

3. 在特定时机（如失焦或提交）更新外部数据源： 使用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>
        &lt;input
          type=&quot;text&quot; // 使用text以允许输入小数和负号，然后在onBlur/onKeyDown时解析
          value={inputValue}
          onChange={handleInputChange}
          onBlur={handleInputBlur}
          onKeyDown={handleKeyDown}
          style={{ marginLeft: &apos;5px&apos; }}
        /&gt;
      </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>{JSON.stringify(dataSource, null, 2)}