如何在React JS中使用Material UI动态添加与移除ToggleButton组

1. 调整状态定义 #

原来的状态仅支持单组日期选择，你需要把状态修改为数组格式，每个数组项对应一组日期的选中值：

// 初始默认显示1组日期选择
const [dateGroups, setDateGroups] = useState(() => [{ selectedDays: [] }]);

2. 实现增删组的处理函数 #

// 新增一组日期选择
const addDateGroup = () => {
  setDateGroups(prev => [...prev, { selectedDays: [] }]);
};

// 删除指定索引的日期组
const deleteDateGroup = (index) => {
  setDateGroups(prev => prev.filter((_, i) => i !== index));
};

// 处理指定组的日期选择变更
const handleDaySelect = (groupIndex, event, newSelectedDays) => {
  setDateGroups(prev => {
    const newGroups = [...prev];
    newGroups[groupIndex].selectedDays = newSelectedDays;
    return newGroups;
  });
};

3. 循环渲染多组ToggleButtonGroup，加上增删按钮 #

return (
  <div>
    {/* 遍历渲染所有日期选择组 */}
    {dateGroups.map((group, index) => (
      <div key={index} style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '8px' }}>
        <ToggleButtonGroup 
          value={group.selectedDays} 
          onChange={(e, val) => handleDaySelect(index, e, val)}
        >
          <ToggleButton
            value="Monday"
            size="small"
            className={classes.buttonToggle}
          >
            <Typography className={classes.buttonToggle}>Lundi</Typography>
          </ToggleButton>
          <ToggleButton
            value="Tuesday"
            className={classes.buttonToggle}
            size="small"
          >
            <Typography className={classes.buttonToggle}>Mardi</Typography>
          </ToggleButton>
          <ToggleButton
            value="Wednesday"
            className={classes.buttonToggle}
            size="small"
          >
            <Typography className={classes.buttonToggle}>Mercredi</Typography>
          </ToggleButton>
          <ToggleButton
            value="Thursday"
            className={classes.buttonToggle}
            size="small"
          >
            <Typography className={classes.buttonToggle}>Jeudi</Typography>
          </ToggleButton>
          <ToggleButton
            value="Friday"
            className={classes.buttonToggle}
            size="small"
          >
            <Typography className={classes.buttonToggle}>Vendredi</Typography>
          </ToggleButton>
          <ToggleButton
            value="Saturday"
            className={classes.buttonToggle}
            size="small"
          >
            <Typography className={classes.buttonToggle}>Samedi</Typography>
          </ToggleButton>
          <ToggleButton
            value="Sunday"
            className={classes.buttonToggle}
            size="small"
          >
            <Typography className={classes.buttonToggle}>Dimanche</Typography>
          </ToggleButton>
        </ToggleButtonGroup>
        {/* 每组后面加删除按钮，至少保留1组时可隐藏删除按钮 */}
        {dateGroups.length > 1 && (
          <Button size="small" color="error" onClick={() => deleteDateGroup(index)}>删除</Button>
        )}
      </div>
    ))}
    {/* 底部加新增按钮 */}
    <Button size="small" startIcon={<AddIcon />} onClick={addDateGroup}>新增日期组</Button>
  </div>
)

注意事项 #

• 若需要限制最多可新增的组数，在addDateGroup里加长度判断即可
• 最终所有组的选中日期都存在dateGroups数组里，提交时直接读取即可

内容的提问来源于stack exchange，提问作者Hayfa chouchene