如何优化输入框逻辑代码并添加条件样式？

你的代码杂乱的核心原因是分散的状态变量和嵌套三元判断，通过合并状态对象和键值直接映射可以大幅简化逻辑，完全满足activeItem对应不同字段的显示与更新需求。

优化步骤与代码实现 #

1. 合并分散状态变量 #

把length、height、width、weight合并为单一对象状态，统一管理更高效：

const [activeItem, setActiveItem] = useState('Length');
const [visible, setVisible] = useState(false);
// 键名与activeItem的取值一一对应
const [dimensions, setDimensions] = useState({
  Length: 0,
  Height: 0,
  Width: 0,
  Weight: 0
});

2. 简化InputModal的Props传递 #

利用activeItem作为键直接取值，用统一回调处理更新，彻底去掉嵌套三元判断：

<InputModal
  visible={visible}
  // 直接通过activeItem获取对应值，空字符串兜底
  value={dimensions[activeItem] || ''}
  // 统一更新逻辑，根据activeItem修改对应字段
  onTextChange={(newValue) => {
    setDimensions(prev => ({
      ...prev,
      [activeItem]: newValue
    }));
  }}
  toggle={() => setVisible(!visible)}
  onSubmit={() => setVisible(!visible)}
/>

3. 可选：TypeScript类型安全优化 #

如果用TypeScript，可通过类型约束避免拼写错误：

type DimensionType = 'Length' | 'Height' | 'Width' | 'Weight';

const [activeItem, setActiveItem] = useState<DimensionType>('Length');
const [dimensions, setDimensions] = useState<Record<DimensionType, number>>({
  Length: 0,
  Height: 0,
  Width: 0,
  Weight: 0
});

优化后的优势 #

• 可读性提升：去掉多层嵌套判断，逻辑一目了然
• 扩展性更强：新增维度字段时，仅需在dimensions对象中添加键值对，无需修改InputModal逻辑
• 状态更集中：所有维度数据统一管理，调试和维护更方便

内容的提问来源于stack exchange，提问作者Julia Schafer