React受控组件：避免输入框失焦的常见陷阱与最佳实践

// 父组件中的状态与处理函数示例
// 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); // 每次按键都更新dataSource，导致父组件重渲染
// };

// Custom Grid Component (子组件)
const gridTemplate = (props: any) => {
  const val = props.Freight; // val直接来源于父组件的props
  return (
    <div>
      <input value={val} onChange={(event) => handleOnchange(event, props)} />
    </div>
  );
};

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

// Custom Grid Component (子组件)
const gridTemplate = (props: any) => {
  // 使用useState管理输入框的本地值
  const [inputValue, setInputValue] = useState(props.Freight);

  // 当props.Freight从父组件更新时，同步本地inputValue
  // 这很重要，以确保外部数据源更新时，输入框能反映最新值
  useEffect(() => {
    setInputValue(props.Freight);
  }, [props.Freight]);

  // 处理输入框的onChange事件，仅更新本地状态
  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setInputValue(event.target.value);
  };

  // 处理输入框的onBlur事件，此时才将本地值同步回父组件
  const handleInputBlur = () => {
    // 假设父组件提供一个更新特定项的函数，例如 props.updateItemFreight
    // 这个函数会负责更新父组件的dataSource状态
    if (props.updateItemFreight) {
        props.updateItemFreight(props.OrderID, inputValue);
    }
  };

  return (
    <div>
      <input
        value={inputValue} // 绑定到本地状态
        onChange={handleInputChange} // 仅更新本地状态
        onBlur={handleInputBlur} // 失焦时才同步到父组件/全局状态
      />
    </div>
  );
};

// 假设父组件的用法示例：
// function ParentComponent() {
//   const [dataSource, setDataSource] = useState<any>(/* 初始数据 */);

//   const updateItemFreight = (orderId: string, newFreight: string) => {
//     setDataSource(prevData => {
//       const newData = [...prevData];
//       const itemIndex = newData.findIndex(item => item.OrderID === orderId);
//       if (itemIndex > -1) {
//         newData[itemIndex].Freight = newFreight;
//       }
//       return newData;
//     });
//   };

//   return (
//     <div>
//       {dataSource.map((item: any) => (
//         <gridTemplate
//           key={item.OrderID} // 确保有唯一的key
//           OrderID={item.OrderID}
//           Freight={item.Freight}
//           updateItemFreight={updateItemFreight} // 传入更新函数
//         />
//       ))}
//     </div>
//   );
// }