解决 React.js 输入框单字符输入后失焦问题

const MyComponent = () => {
  const [inputValue, setInputValue] = useState('');

  const handleChange = (event) => {
    setInputValue(event.target.value); // 每次按键都更新状态
  };

  return (
    <input
      type="text"
      value={inputValue} // value 绑定到状态
      onChange={handleChange}
    />
  );
};

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

/**
 * 可编辑输入单元格组件
 * 该组件内部管理输入框的值，只在特定事件（如失焦）时通知父组件更新。
 *
 * @param {any} initialValue - 输入框的初始值，通常来自父组件的数据源。
 * @param {function} onValueCommit - 当值最终确定时（如失焦），调用的回调函数，将新值传递给父组件。
 */
const EditableInputCell = ({ initialValue, onValueCommit }) => {
  // 1. 使用局部状态管理输入框的当前值
  //    这个状态只在 EditableInputCell 内部使用，不会立即触发外部组件重渲染。
  const [currentValue, setCurrentValue] = useState(initialValue);

  // 2. 使用 useEffect 监听 initialValue 的变化
  //    当父组件传入的 initialValue 变化时（例如，数据从后端加载完成或外部重置），
  //    更新局部状态，确保显示的是最新的外部值。
  useEffect(() => {
    setCurrentValue(initialValue);
  }, [initialValue]);

  // 3. onChange 事件处理函数：
  //    每次按键只更新局部状态 `currentValue`，不触发 `onValueCommit`。
  const handleChange = (event) => {
    setCurrentValue(event.target.value);
  };

  // 4. onBlur 事件处理函数：
  //    当输入框失去焦点时，才将局部值提交给父组件。
  //    通过比较 `currentValue` 和 `initialValue`，避免不必要的父组件状态更新。
  const handleBlur = () => {
    if (currentValue !== initialValue) {
      onValueCommit(currentValue);
    }
  };

  // 5. 可选：onKeyDown 事件处理函数
  //    当用户按下回车键时，模拟失焦行为，同样触发 `onBlur` 提交值。
  const handleKeyDown = (event) => {
    if (event.key === 'Enter') {
      event.target.blur(); // 触发 onBlur 事件
    }
  };

  return (
    <input
      type="text"
      value={currentValue} // 输入框的值绑定到局部状态
      onChange={handleChange}
      onBlur={handleBlur}
      onKeyDown={handleKeyDown}
      // 其他属性如 className, placeholder 等...
    />
  );
};

// --- 如何在父组件中使用 EditableInputCell ---

// 假设这是你的父组件，管理着 dataSource 状态
// import React, { useState } from 'react'; // 如果在同一个文件，可省略

const ParentComponent = () => {
  const [dataSource, setDataSource] = useState([
    { OrderID: 1, Freight: 100 },
    { OrderID: 2, Freight: 200 },
    { OrderID: 3, Freight: 350 },
  ]);

  // 这个函数将被传递给 EditableInputCell 的 onValueCommit prop
  // 它负责更新父组件的 dataSource 状态
  const handleFreightCommit = (orderId, newFreight) => {
    setDataSource(prevData =>
      prevData.map(item =>
        item.OrderID === orderId ? { ...item, Freight: newFreight } : item
      )
    );
  };

  return (
    <div>
      <h2>订单运费列表</h2>
      {dataSource.map(item => (
        // 注意：在列表渲染时，为每个元素提供唯一的 key 是非常重要的
        <div key={item.OrderID} style={{ marginBottom: '10px' }}>
          <span>订单 ID: {item.OrderID}，运费: </span>
          <EditableInputCell
            initialValue={item.Freight}
            // 当 EditableInputCell 提交新值时，调用此函数更新父组件状态
            onValueCommit={(newFreight) => handleFreightCommit(item.OrderID, newFreight)}
          />
        </div>
      ))}
    </div>
  );
};

export default ParentComponent;