React输入框焦点丢失问题：深入解析与解决方案

// State to store DataSource
const [dataSource, setDataSource] = useState<any>(data);

const handleOnchange = (event: any, props: any) => {
  const newData = [...dataSource];
  const itemIndex = newData.findIndex(
    (item) => item.OrderID === props.OrderID
  );
  newData[itemIndex].Freight = event.target.value;
  setDataSource(newData); // 每次输入都更新了全局状态
};

// Custom Grid Component (render prop or function)
const gridTemplate = (props: any) => {
  const val = props.Freight;
  return (
    <div>
      <input value={val} onChange={(event) => handleOnchange(event, props)} />
    </div>
  );
};

import React, { useState, useEffect } from 'react';

// 模拟初始数据
const initialData = [
  { OrderID: 1, Freight: 100 },
  { OrderID: 2, Freight: 200 },
  { OrderID: 3, Freight: 300 },
];

/**
 * 独立的 GridInput 组件
 * 负责管理单个输入框的局部状态，并在特定事件时通知父组件更新全局状态
 */
const GridInput = ({ initialValue, onValueChange, orderId }) => {
  // 使用局部状态 inputValue 来控制输入框的当前显示值
  const [inputValue, setInputValue] = useState(initialValue);

  // 当外部 initialValue 发生变化时（例如，数据从后端更新），同步到局部状态
  // 注意：此 useEffect 确保了当 dataSource 在外部被更新时，GridInput 能够反映最新的值。
  // 但在用户输入过程中，由于 onValueChange 只在 onBlur/onEnter 触发，
  // initialValue 在用户键入时不会改变，因此不会干扰输入体验。
  useEffect(() => {
    setInputValue(initialValue);
  }, [initialValue]);

  // 处理输入框值变化的函数，只更新局部状态
  const handleChange = (e) => {
    setInputValue(e.target.value);
  };

  // 处理输入框失去焦点事件，此时通知父组件更新全局状态
  const handleBlur = () => {
    // 只有当输入框失去焦点时，才通过回调函数将最终值传递给父组件
    onValueChange(orderId, inputValue);
  };

  // 处理键盘按下事件，特别是 Enter 键，也可以触发更新
  const handleKeyDown = (e) => {
    if (e.key === 'Enter') {
      // 按下 Enter 键也触发更新，并使输入框失去焦点
      onValueChange(orderId, inputValue);
      e.target.blur(); // 强制输入框失去焦点
    }
  };

  return (
    <input
      type="text" // 明确指定输入类型
      value={inputValue}
      onChange={handleChange}
      onBlur={handleBlur}
      onKeyDown={handleKeyDown}
      style={{ border: '1px solid #ccc', padding: '5px' }} // 简单的样式
    />
  );
};

/**
 * 父组件，负责管理 dataSource 状态并渲染 GridInput 列表
 */
const MyGridComponent = () => {
  const [dataSource, setDataSource] = useState(initialData);

  // 更新 dataSource 中特定 Freight 值的回调函数
  const handleUpdateFreight = (orderId, newFreight) => {
    setDataSource((prevDataSource) => {
      const newData = [...prevDataSource];
      const itemIndex = newData.findIndex(
        (item) => item.OrderID === orderId
      );
      if (itemIndex > -1) {
        // 创建新对象以避免直接修改原对象，确保 immutability
        newData[itemIndex] = { ...newData[itemIndex], Freight: newFreight };
      }
      return newData;
    });
  };

  return (
    <div style={{ fontFamily: 'Arial, sans-serif', padding: '20px' }}>
      <h2>订单运费列表</h2>
      {dataSource.map((item) => (
        <div key={item.OrderID} style={{ marginBottom: '10px', border: '1px solid #eee', padding: '10px' }}>
          <span style={{ marginRight: '10px', fontWeight: 'bold' }}>订单ID: {item.OrderID}</span>
          <span style={{ marginRight: '10px' }}>运费:</span>
          <GridInput
            initialValue={item.Freight}
            onValueChange={handleUpdateFreight}
            orderId={item.OrderID}
          />
        </div>
      ))}

      <h3 style={{ marginTop: '30px' }}>当前数据源:</h3>
      <pre style={{ background: '#f4f4f4', padding: '10px', borderRadius: '5px' }}>
        {JSON.stringify(dataSource, null, 2)}
      </pre>
    </div>
  );
};

export default MyGridComponent;