如何实现下拉按钮点击10+选项时切换为输入框？

原组件代码 #

<button>
  <select
    onChange={(e) => {
      const buttonItemCount = e.target.value;
      const numButtonItemCount = parseFloat(buttonItemCount);
      onCartButtonChangeCount(x, numButtonItemCount);
    }}
    value={x.inCart}
  >
    <option value="default">{x.inCart}</option>
    <option value="0">0 (Delete)</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10+</option>
  </select>
</button>

需求说明 #

当前下拉框选择数值时会触发onCartButtonChangeCount方法，需实现：当用户选择“10+”选项时，将下拉框转换为可输入数字的输入框，输入完成后仍调用onCartButtonChangeCount方法更新数值。

实现方案 #

通过React状态控制下拉框和输入框的显示切换，具体实现如下：

完整代码 #

import { useState } from 'react';

// 组件内部逻辑
const [showInput, setShowInput] = useState(false);
const [customCount, setCustomCount] = useState(10);

const handleSelectChange = (e) => {
  const value = e.target.value;
  if (value === "10") {
    setShowInput(true);
    return;
  }
  const numValue = parseFloat(value);
  onCartButtonChangeCount(x, numValue);
};

const handleInputConfirm = () => {
  if (customCount >= 10 && !isNaN(customCount)) {
    onCartButtonChangeCount(x, customCount);
    setShowInput(false);
  }
};

return (
  <button>
    {showInput ? (
      <input
        type="number"
        min="10"
        value={customCount}
        onChange={(e) => setCustomCount(parseFloat(e.target.value))}
        onBlur={handleInputConfirm}
        onKeyDown={(e) => {
          if (e.key === 'Enter') handleInputConfirm();
        }}
        autoFocus
      />
    ) : (
      <select
        onChange={handleSelectChange}
        value={x.inCart.toString()}
      >
        <option value="default">{x.inCart}</option>
        <option value="0">0 (Delete)</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10+</option>
      </select>
    )}
  </button>
);

关键细节 #

• 用showInput状态控制下拉框/输入框的显示切换
• 输入框设置min="10"限制最小值，避免无效输入
• 支持失去焦点或回车两种方式确认输入，提升操作流畅度
• 输入框自动聚焦（autoFocus），减少用户操作步骤

内容的提问来源于stack exchange，提问作者Robert Saavedra Jr.