从 Solidity 传递枚举作为 React Typescript 中的索引数组

Question

我不知道如何针对我的问题提出正确的问题，所以我将在这里概述一下我要实现的目标：

基本上我已经从我的 Solidity 创建了一个枚举，我可以在其中为将要创建的每个活动放置一个类别

Campaign.sol

  enum Category {
        CHARITY,
        TECH,
        WEB3,
        GAMES,
        EDUCATION
    }

所以在我的 CreateCampaign 页面中，我创建了一个下拉组件来列出所有类别，如下所示：

下拉.tsx

type Options = {
  index: number;
  value: string;
};

interface DropDownProps {
  labelName: string;
  value: number;
  options: Options;
  handleChange: (e: any) => void;
}

const DropDown: React.FC<DropDownProps> = ({
  labelName,
  value,
  options,
  handleChange,
}: DropDownProps): JSX.Element => {
  const [isExpanded, setIsExpanded] = useState<boolean>(false);
  const [selectedCategory, setSelectedCategory] = useState(null);

  const toggleDropDown = () => {
    setIsExpanded(!isExpanded);
  };

  useEffect(() => {
    setIsExpanded(isExpanded);
  }, [isExpanded]);

  return (
    <label className="bg-[#1c1c24] flex  flex-col rounded-[10px]  ">
      {labelName && (
        <span className="font-epilogue font-medium text-[14px] leading-[22px] text-[#808191] mb-[10px]">
          {labelName}
        </span>
      )}
      <button
        onClick={() => toggleDropDown()}
        className="py-[15px] sm:px-[25px] px-[15px] outline-none border-[1px] border-[#808191]  bg-[#3a3a43] font-epilogue text-white text-[14px] rounded-[10px] sm:min-w-[300px] hover:border-[#3a3a43] hover:bg-[#808191] mb-1"
        onChange={handleChange}
      >
        <div className="font-epilogue font-medium">
          {selectedCategory != null
            ? options[selectedCategory].value
            : "Choose Your Category"}
        </div>
      </button>
      {isExpanded && (
        <>
          {options?.map(
            (opt: string, i: number): JSX.Element => (
              <div
                key={i}
                className="py-[10px] sm:px-[25px] px-[10px] text-center outline-none border-[1px] border-[#808191]  bg-[#3a3a43] font-epilogue text-white text-[14px] rounded-[10px] sm:min-w-[300px] hover:border-[#808191] hover:bg-[#808191] cursor-pointer mb-1"
                onClick={e => {
                  setSelectedCategory(i);
                  console.log(i); // ---> the output is number, but i dont know how to forward it to CreateCampaign.tsx
                }}
              >
                <span className="font-epilogue font-normal">{opt.value}</span>
              </div>
            )
          )}
        </>
      )}
    </label>
  );
};

export default DropDown;

所以据我所知，枚举是从我的前端提交表单时基于数字的函数，所以在我的上下文中，我创建了一个如下所示的函数：

type Form = {
  category: number;
  title: string;
  description: string;
  target: ethers.BigNumber;
  deadline: string | number | Date;
  image: string;
};

 const createCampaign = useCallback(
    async (form: Form) => {
      const signer = accountProvider?.getSigner();
      const contractWithSigner = contract?.connect(signer);
      try {
        await contractWithSigner?.createCampaign(
          form.category,
          form.title,
          form.description,
          form.target,
          new Date(form.deadline).getTime(),
          form.image
        );
      } catch (err) {
        console.log("contract createCampaign call failed", err);
      }
    },
    [accountProvider, contract]
  );

但这里的问题是，我如何在 CreateCampaign 中为我的表单传递一个索引而不是字符串，因为它只能为我的函数接受一个数字。

这是我的 CreateCampaign.tsx：

 interface FormProps {
  category: number;
  title: string;
  description: string;
  target: string;
  deadline: Date;
  image: string;
}

const CreateCampaign = () => {
  const [isLoading, setIsLoading] = useState<boolean>(false);
  const [selected, setSelected] = useState<string>("");
  const { createCampaign } = useCrowdFundData();
  const [form, setForm] = useState<FormProps>({
    category: , // ---> not sure what to put here
    title: "",
    description: "",
    target: "",
    deadline: new Date(),
    image: "",
  });

 const options = [
    {
      index: 0,
      value: "Charity",
    },
    {
      index: 1,
      value: "Tech",
    },
    {
      index: 2,
      value: "Web3",
    },
    {
      index: 3,
      value: "Games",
    },
    {
      index: 4,
      value: "Education",
    },
  ];

// My onChange event
 const handleFormFieldChange = (
    fieldName: string,
    e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>
  ) => {
    setForm({
      ...form,
      [fieldName]: e.target.value,
    });
    console.log(form); // I can see all the input form but I cant see the category selected from console.log

  };

 <DropDown
   labelName="Categories"
   value={form.category} // Syntax error start here
   options={options}
   handleChange={e => handleFormFieldChange("category", e)}
 />

我尝试将我的接口定义为数字[]，但仍然出现相同的错误