在特定条件下反应取消选中输入类型检查

Question

我有 3 个输入类型检查字段

• 输入选人
• 输入挑女人
• 输入选择特殊

用户只能检查男人或女人+特殊。

用户不能选择男人和女人。

如果用户先选男，然后想选女，则应取消选中男输入，并选中/选中女复选框。

基本上我有以下条件：

• 人 + 特殊 - 允许
• 女人 + 特殊 - 允许
• 男人 + 女人 - 不允许（只能选择其中一个）

我该如何实施？

到目前为止，我已经这样做了：

const TargetViewCard = ({ onChangeTraits }: Props) => {
  const { targetGroupData, targetGroupIsLoading, targetGroupIsError } = useTargetGroupData()
  const [selectedTarget, setSelectedTarget] = useState<ITargetItem[]>([])

  const findTarget = (id: string) => targetGroupData.items.find((target: ITargetItem) => target.id === parseInt(id))

  const checked = (item: ITargetItem) => !!selectedTarget?.find(c => c.id === item.id)

  const toggleTarget = (e: ChangeEvent<HTMLInputElement>) => {
    const target = findTarget(e.target.value)

    let sTarget
    if (selectedTarget.includes(target)) {
      sTarget = selectedTarget.filter(selectedTarget => selectedTarget.id !== target.id)
      setSelectedTarget(selectedTarget.filter(selectedTarget => selectedTarget.id !== target.id))
    } else {
      sTarget = [...selectedTarget, target]
      setSelectedTarget([...selectedTarget, target])
    }

    onChangeTraits(sTarget)
  }

render(
    ...
    {targetGroupData.items.map((item: ITargetItem) => (
        <div key={item.name} className="py-4">
            <label htmlFor={`target-item-${item.id}`}>
            <div>
                {item.name}
                <input
                id={`target-item-${item.id}`}
                name={`target-item-${item.id}`}
                type="checkbox"
                className="hidden"
                value={item.id}
                onChange={e => toggleTarget(e)}
                />
            </div>
            </label>
        </div>
    ))}
)