REACT- 根据选择复选框制作 2 个不同的动态显示(现在所有内容都在同一页面上)

REACT- Making 2 different dynamic displays depending on a selection checkboxes ( everything is on the same page now)

根据我的用户Change the typeChoose the comments的selection(他只能select一个选择),会有不同的显示,但我的代码在同一页面中显示了两个选项。

所以,一开始只有 2 个复选框 Change the typeChoose the comments 然后根据 selection 显示出现

 export default function App(){
  ...
  return (
    <>
     {/* Step 1- 2 checkboxes are displayed */}
      <form onSubmit={handleSubmit}>
        <input type="checkbox" onChange={(e) => setType(e.target.value)} />
        <span className="text-md p-1 font-bold  leading-8 text-gray-500">
          Change the type{" "}
        </span>
        <input type="checkbox" onChange={(e) => setComment(e.target.value)} />
        <span className="text-md p-1 font-bold  leading-8 text-gray-500">
          Choose the comments{" "}
        </span>
      </form>
      
      {/*Step 2 - if setType ==true then display */}
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          value={menu}
          placeholder="Menu"
          onChange={(e) => setMenu(e.target.value)}
        />
        <div className="text-md font-bold  text-gray-500 flex flex-wrap gap-x-2 ">
          Type : <CustomDropdown options={LOCATION} isMulti={false} />
        </div>
        <label className="mr-3 h-6 text-md font-bold  leading-8 text-gray-500">
          Location:
        </label>
        <input
          type="text"
          value={location}
          placeholder="Location"
          onChange={(e) => setLocation(e.target.value)}
        />
      </form>

      {/*Step 2 - if setComment ==true (selected) then display */}
      <form onSubmit={handleSubmit}>
        <Comments />
        <input
          type="text"
          value={menu}
          placeholder="Menu"
          onChange={(e) => setMenu(e.target.value)}
        />
        <div className="text-md font-bold  text-gray-500 flex flex-wrap gap-x-2 ">
          Type : <CustomDropdown options={LOCATION} isMulti={false} />
        </div>
        <label className="mr-3 h-6 text-md font-bold  leading-8 text-gray-500">
          Location:
        </label>
        <input
          type="text"
          value={location}
          placeholder="Location"
          onChange={(e) => setLocation(e.target.value)}
        />
      </form>
    </>
  );
}

这是我的code

这里有一张图片可以理解:

多亏了你加的图片,我明白了,这里是代码:https://codesandbox.io/s/first-page-with-dynamic-field-forked-vpxyhu?file=/src/App.js