在选择和取消选择按钮/组件时处理多选情况

Question

我正在尝试在这里实现一些目标，我正在尝试使用自定义组件设置多选按钮，但在这里我需要验证至少应该在此选择一个。就像它应该表现得像应该选择至少一个。 它可以选择多个，但选择最后一个时，它应保持选中。 带有消息说至少需要选择一个。

示例 - 如果选择多个，则文件没有错误（如下所示）；

但是当只选择一个然后用户尝试取消选择它时，它应该显示类似这样的消息......（如下所示）

在这种情况下，它下面应该有一条消息，"Atleast one should be selected.."

https://codesandbox.io/s/pedantic-haze-7f214

这是我想要实现的沙盒链接。 （另外，我正在使用 reduxform，这是我正在尝试使用自定义验证构建的自定义字段组件）

Answer 1

组件代码

import React, { useState } from "react";
import "./styles.css";
import { Avatar } from "antd";
const weekDays = ["S", "M", "T", "W", "TH", "F", "ST"];

export default function App() {
  const [selectedDays, setSelectedDays] = useState({});
  const [error, setError] = useState();
  const handleSelect = (day) => {
    if(error) {
      setError(null);
    }
    const newSelectedDays = { ...selectedDays, [day]: !selectedDays[day] };
    if(!Object.values(newSelectedDays).find(x => x)) {
      setError('Atleast one should be selected..')
      return;
    }
    setSelectedDays(newSelectedDays);
  };
  return (
    <div className="App">
      {weekDays.map((day) => (
        <Avatar
          onClick={() => handleSelect(day)}
          className={`week-day ${selectedDays[day] ? "selected-day" : ""}`}
          key={day}
        >
          {day}
        </Avatar>
      ))}
      {error}
    </div>
  );
}

样式代码

.App {
  font-family: sans-serif;
  display: flex;
  justify-content: center;
  text-align: center;
}
.week-day {
  cursor: pointer;
  border: 1px solid #ddd;
  border-radius: 50%;
  padding: 1rem 1.1rem;
  width: 1rem;
  margin: 0.2rem;
  margin-top: 3rem;
  color: black;
}

.selected-day {
  background: magenta;
  color: white;
}