React实现带增删功能的下拉选框与输入框组合问题求助

问题核心 #

原代码存在以下关键问题导致无法实现需求：

• 仅通过numberOfLinks控制输入框数量，未跟踪每个链接的类型与URL值
• 未实现每种链接类型仅允许一个的限制
• 状态结构与类型定义不匹配，无法收集有效数据
• 输入框与下拉选框的变更未同步到全局状态

修改后的完整代码 #

import { useState } from "react";
import MainLayout from "./layouts/MainLayout";

const linkOptions = [
  { value: "web", label: "Web" },
  { value: "android", label: "Android" },
  { value: "ios", label: "iOS" },
  { value: "youtube", label: "Youtube" },
  { value: "twitter", label: "Twitter" }
];

// 内部状态类型，管理单个链接的类型和URL
type LinkItem = {
  type: string;
  url: string;
};

// 最终输出格式类型
type ProjectLink = {
  web?: string;
  android?: string;
  ios?: string;
  youtube?: string;
  twitter?: string;
};

export default function App() {
  const [links, setLinks] = useState<LinkItem[]>([{ type: "web", url: "" }]);

  // 添加新链接：仅添加未被使用过的类型
  const handleAddLink = () => {
    const usedTypes = links.map(item => item.type);
    const availableType = linkOptions.find(opt => !usedTypes.includes(opt.value))?.value;
    if (availableType) {
      setLinks(prev => [...prev, { type: availableType, url: "" }]);
    }
  };

  // 删除指定索引的链接
  const handleRemoveLink = (index: number) => {
    setLinks(prev => prev.filter((_, i) => i !== index));
  };

  // 更新单个链接的类型或URL，修改类型时校验唯一性
  const handleLinkChange = (index: number, key: keyof LinkItem, value: string) => {
    setLinks(prev => {
      const newLinks = [...prev];
      // 修改类型时，检查是否已被其他链接占用
      if (key === "type") {
        const isDuplicate = prev.some((item, i) => i !== index && item.type === value);
        if (isDuplicate) return prev;
      }
      newLinks[index] = { ...newLinks[index], [key]: value };
      return newLinks;
    });
  };

  // 提交时转换为要求的格式
  const submit = () => {
    const projectLinks: ProjectLink[] = links.map(item => ({
      [item.type]: item.url
    }));
    console.log("最终输出:", projectLinks);
    // 此处可添加接口提交等后续逻辑
  };

  return (
    <MainLayout>
      <div className="flex flex-col">
        {links.map((link, index) => {
          // 计算当前链接可选的类型：自身类型 + 未被使用的类型
          const usedTypes = links.map(item => item.type);
          const availableOptions = linkOptions.filter(opt => 
            opt.value === link.type || !usedTypes.includes(opt.value)
          );
          return (
            <LinkField
              key={index}
              link={link}
              index={index}
              availableOptions={availableOptions}
              onLinkChange={handleLinkChange}
              onRemoveLink={handleRemoveLink}
              isLast={index === links.length - 1}
              onAddLink={handleAddLink}
            />
          );
        })}
        <button className="btn btn-active mt-8" onClick={submit}>
          提交
        </button>
      </div>
    </MainLayout>
  );
}

function LinkField({
  link,
  index,
  availableOptions,
  onLinkChange,
  onRemoveLink,
  isLast,
  onAddLink
}: {
  link: LinkItem;
  index: number;
  availableOptions: typeof linkOptions;
  onLinkChange: (index: number, key: keyof LinkItem, value: string) => void;
  onRemoveLink: (index: number) => void;
  isLast: boolean;
  onAddLink: () => void;
}) {
  return (
    <div className="mt-1 mb-1">
      <div className="flex justify-between">
        <select
          value={link.type}
          onChange={(e) => onLinkChange(index, "type", e.target.value)}
          className="select select-primary"
        >
          {availableOptions.map((option) => (
            <option key={option.value} value={option.value}>
              {option.label}
            </option>
          ))}
        </select>
        <input
          type="text"
          value={link.url}
          onChange={(e) => onLinkChange(index, "url", e.target.value)}
          placeholder="example.com"
          className="input input-bordered ml-1 mr-1"
        />
        {/* 仅最后一个链接显示添加按钮 */}
        {isLast && (
          <button
            className="btn btn-md btn-active ml-1 mr-1"
            onClick={onAddLink}
          >
            添加
          </button>
        )}
        {/* 至少保留一个链接时显示删除按钮 */}
        {links.length > 1 && (
          <button
            className="btn btn-md btn-active ml-1 mr-1"
            onClick={() => onRemoveLink(index)}
          >
            删除
          </button>
        )}
      </div>
    </div>
  );
}

关键修改说明 #

1. 状态重构：用LinkItem[]存储每个链接的类型和URL，替代原有的numberOfLinks，直接跟踪有效数据
2. 类型唯一性控制：
   • 添加新链接时自动筛选未使用的类型，避免重复
   • 修改下拉选框时，禁止选择已被其他链接占用的类型
3. 交互逻辑优化：
   • 仅最后一个链接显示「添加」按钮，避免无效重复添加
   • 至少保留一个链接时才显示「删除」按钮，防止空状态
4. 数据格式转换：提交时将内部状态转换为要求的[{web:"url"},{android:"url"}]格式
5. 组件解耦：LinkField仅负责单个链接的UI渲染和局部交互，状态管理统一在父组件

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