Есть три тогла, как сделать чтобы когда включаешь оодин, остальные дизеблелись, но при этом есть 1-й выключил, другие активные

Question

Пробовал создать стейт и положить его в checked, но если checked тру, то его уже нельзя выключить на onChange

<Box mt={3}>
    <Box>
        <FormControlLabel
            id='one'
            onChange={() => setChecked('one')}
            control={<Switch checked={checked === 'one'} size='small' defaultChecked />}
            label={<Typography fontSize='12px'>one</Typography>}
        />
    </Box>
    <Box>
        <FormControlLabel
            id='two'
            onChange={() => setChecked('two')}
            control={<Switch size='small' />}
            label={<Typography fontSize='12px'>two</Typography>}
        />
    </Box>
    <Box>
        <FormControlLabel
            id='three'
            onChange={() => setChecked('three')}
            sx={{ fontSize: '12px' }}
            control={<Switch size='small' />}
            label={
                <Typography fontSize='12px'>
                    three
                </Typography>
            }
        />
    </Box>
</Box>

Answer 1

Когда один переключатель включается, состояние других переключателей устанавливается как неактивное. Если тот же переключатель выключается, все снова становятся активными.

const [activeToggle, setActiveToggle] = useState(null);

  const handleToggleChange = (id) => {
    // Если переключатель включается, делаем его активным
    // Если он уже активный и его снова выключили, сбрасываем состояние
    setActiveToggle((prev) => (prev === id ? null : id));
  };

<Box mt={3}>
      <Box>
        <FormControlLabel
          id="one"
          onChange={() => handleToggleChange('one')}
          control={
            <Switch
              checked={activeToggle === 'one'}
              size="small"
            />
          }
          label={<Typography fontSize="12px">one</Typography>}
        />
      </Box>
      <Box>
        <FormControlLabel
          id="two"
          onChange={() => handleToggleChange('two')}
          control={
            <Switch
              checked={activeToggle === 'two'}
              disabled={activeToggle !== null && activeToggle !== 'two'}
              size="small"
            />
          }
          label={<Typography fontSize="12px">two</Typography>}
        />
      </Box>
      <Box>
        <FormControlLabel
          id="three"
          onChange={() => handleToggleChange('three')}
          control={
            <Switch
              checked={activeToggle === 'three'}
              disabled={activeToggle !== null && activeToggle !== 'three'}
              size="small"
            />
          }
          label={<Typography fontSize="12px">three</Typography>}
        />
      </Box>
    </Box>
  );
}

БЛОГ НА HUSL

Есть три тогла, как сделать чтобы когда включаешь оодин, остальные дизеблелись, но при этом есть 1-й выключил, другие активные

Ответы (1 шт):