ReactJS实现含货币、金额、时间属性的只读字段与输入组件

组件功能 #

• 支持货币类型下拉选择（可自定义选项）
• 支持数字金额输入（限制非负数值）
• 支持时间周期选择（时/日/月/年）
• 将用户输入的三项值整合为格式化文本，在只读输入框中展示
• 输入区域采用紧凑布局，匹配参考样式

代码实现（基于 Ant Design） #

以下是完整的函数式组件代码，使用 Ant Design 组件库快速实现交互逻辑：

import React, { useState } from 'react';
import { Select, Input, InputNumber, Space } from 'antd';
import 'antd/dist/reset.css';

const { Option } = Select;

const CurrencyPeriodSelector = () => {
  // 管理用户输入状态
  const [currency, setCurrency] = useState('');
  const [amount, setAmount] = useState('');
  const [period, setPeriod] = useState('');
  
  // 生成格式化展示文本
  const displayText = amount && currency && period 
    ? `${amount} ${currency} / ${period}` 
    : '';

  return (
    <div className="selector-container">
      {/* 输入控制组 */}
      <Space size="small" className="input-group">
        {/* 金额输入 */}
        <InputNumber
          placeholder="输入金额"
          value={amount}
          onChange={setAmount}
          min={0}
          style={{ width: 120 }}
        />
        {/* 货币选择 */}
        <Select
          placeholder="选择货币"
          value={currency}
          onChange={setCurrency}
          style={{ width: 100 }}
        >
          <Option value="USD">USD</Option>
          <Option value="CNY">CNY</Option>
          <Option value="EUR">EUR</Option>
          <Option value="GBP">GBP</Option>
        </Select>
        {/* 周期选择 */}
        <Select
          placeholder="选择周期"
          value={period}
          onChange={setPeriod}
          style={{ width: 100 }}
        >
          <Option value="时">时</Option>
          <Option value="日">日</Option>
          <Option value="月">月</Option>
          <Option value="年">年</Option>
        </Select>
      </Space>

      {/* 只读展示框 */}
      <Input
        value={displayText}
        readOnly
        placeholder="请完成金额、货币和周期选择"
        style={{ marginTop: 16 }}
      />
    </div>
  );
};

export default CurrencyPeriodSelector;

样式实现方案 #

1. Ant Design 内置样式调整 #

通过自定义 CSS 覆盖 AntD 默认样式，贴近参考图的视觉效果：

.selector-container {
  padding: 16px;
}

.input-group .ant-input-number,
.input-group .ant-select-selector {
  border-radius: 4px;
  border: 1px solid #d9d9d9;
}

.input-group .ant-input-number:focus-within,
.input-group .ant-select-focused .ant-select-selector {
  border-color: #1890ff;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}

.ant-input[readonly] {
  background-color: #f5f5f5;
  color: rgba(0, 0, 0, 0.85);
}

2. SCSS 嵌套样式方案 #

如果使用 SCSS，可以用嵌套语法简化样式代码：

.selector-container {
  padding: 16px;

  .input-group {
    .ant-input-number,
    .ant-select-selector {
      border-radius: 4px;
      border: 1px solid #d9d9d9;

      &:focus-within,
      .ant-select-focused & {
        border-color: #1890ff;
        box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
      }
    }
  }

  .ant-input[readonly] {
    background-color: #f5f5f5;
    color: rgba(0, 0, 0, 0.85);
  }
}

3. Tailwind CSS 方案 #

直接在组件中通过 Tailwind 类名实现样式，无需额外 CSS 文件：

// 替换原组件的 JSX 部分
return (
  <div className="p-4">
    <Space size="small" className="flex">
      <InputNumber
        placeholder="输入金额"
        value={amount}
        onChange={setAmount}
        min={0}
        className="w-30 rounded border border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-200"
      />
      <Select
        placeholder="选择货币"
        value={currency}
        onChange={setCurrency}
        className="w-24 rounded border border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-200"
      >
        {/* 货币选项不变 */}
      </Select>
      <Select
        placeholder="选择周期"
        value={period}
        onChange={setPeriod}
        className="w-24 rounded border border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-200"
      >
        {/* 周期选项不变 */}
      </Select>
    </Space>

    <Input
      value={displayText}
      readOnly
      placeholder="请完成金额、货币和周期选择"
      className="mt-4 bg-gray-100 rounded border border-gray-300"
    />
  </div>
);

占位符设置说明 #

所有输入控件的占位符均通过组件自身的 placeholder 属性设置：

• 金额输入框（InputNumber）：placeholder="输入金额"，为空时显示输入提示
• 货币/周期选择器（Select）：placeholder="选择货币"/placeholder="选择周期"，未选中选项时显示选择提示
• 只读展示框（Input）：placeholder="请完成金额、货币和周期选择"，用户未完成所有输入时显示引导提示

内容的提问来源于stack exchange，提问作者Tanisha Shrivastava