React输入框在键入字符后失去焦点：深入理解与解决方案

// 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>
  );
};

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)}