在Next.js中使用react-select点击other选项后如何显示输入框

实现逻辑 #

• 新增两个状态变量：分别存储下拉框选中项、用户输入的自定义内容
• 给react-select组件绑定onChange事件，监听选择行为，判断选中值是否为other
• 增加条件渲染逻辑：当选中值为other时，展示自定义输入框，同步输入内容到状态

完整代码示例 #

'use client' // Next.js App Router 场景下需要添加该指令标识为客户端组件，Pages Router可删除
import { useState } from 'react';
// 你代码中的SelectComponent就是引入的react-select组件
import SelectComponent from 'react-select';

export default function MySelect() {
  // 存储下拉框选中项
  const [selectedOpt, setSelectedOpt] = useState(null);
  // 存储用户输入的自定义内容
  const [customVal, setCustomVal] = useState('');

  // 下拉框选择事件处理
  const handleSelectChange = (opt) => {
    setSelectedOpt(opt);
    // 切换到非Other选项时清空自定义输入，可根据业务需求调整
    if (opt?.value !== 'other') {
      setCustomVal('');
    }
  };

  // 表单提交示例逻辑
  const handleSubmit = (e) => {
    e.preventDefault();
    const finalValue = selectedOpt.value === 'other' ? customVal : selectedOpt.value;
    // 后续可直接使用finalValue提交
    console.log('最终提交值：', finalValue);
  };

  return (
    <form onSubmit={handleSubmit}>
      <SelectComponent
        name={'types'}
        closeMenuOnSelect
        options={[
          { value: 'big', label: 'big' },
          { value: 'small', label: 'small' },
          { value: 'other', label: 'Other' },
        ]}
        value={selectedOpt}
        onChange={handleSelectChange}
      />
      {/* 选中Other时动态渲染输入框 */}
      {selectedOpt?.value === 'other' && (
        <div style={{ marginTop: '12px' }}>
          <label>自定义内容：</label>
          <input
            type="text"
            value={customVal}
            onChange={(e) => setCustomVal(e.target.value)}
            placeholder="请输入自定义类型"
            style={{ marginLeft: '8px', padding: '4px 8px', border: '1px solid #ddd', borderRadius: '4px' }}
            required // 可加required做必填校验
          />
        </div>
      )}
      <button type="submit" style={{ marginTop: '12px' }}>提交</button>
    </form>
  );
}

补充说明 #

如果你使用的是Next.js Pages Router，直接删除代码顶部的'use client'指令即可正常使用。
提交表单时优先判断选中值是否为other，是则取自定义输入的内容，否则取下拉框选中的值即可。

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