Next.js - mui Select, Chip 선택 개수 제한하기

 

 

선택 최대 갯수 제한이 없었는데 2개로 제한하기위한 코드.!

 

FormContext에서 제공하는 watch에 useState도 써보고 onChange={onChange}로 target.value 콘솔도 찍어보았지만 잘 안됐다.

여기서 알게된 mui select컴포넌트의 onChage 속성 특.

<Select
    native
    value={muiSelectValue}
    onChange={handleMuiSelectOnChange}
    autoWidth
  >
    <option value="one">One</option>
    <option value="two">Two</option>
    <option value="three">Three</option>
  </Select>
  <FormHelperText>&nbsp;&nbsp; 최대 2개</FormHelperText>
    {capacityOptions.map((text, i) => (
      <MenuItem key={i} value={i}>
        {text}
      </MenuItem>
    ))}
</Select>

 

onChange={onChange} 로 코드를 짰는데 select가 정상적으로 안되는 것! 

onChange는 클릭이벤트에 대한 응답으로 menuItem을 호출하는데, mui select에서 기본으로 제공하는 handleMuiSelectOnChange를 써야 이벤트 버블링이 된다고~

 

  const handlemuiselectonchange = (e) => {
    if (e.target.value.length > 2) {
      alert('최대 2개까지 선택 가능합니다.');
    } else {
      setValue('capacities', e.target.value.sort());
    }
  };

 

그리고 간단하게 구현 끗.

 

 

🔽 전체코드

import {
  Box,
  Chip,
  FormControl,
  FormHelperText,
  InputLabel,
  MenuItem,
  Select,
} from '@mui/material';
import { Product } from '../../types';
import { Controller, useFormContext } from 'react-hook-form';

const capacityOptions = ['1인', '2인', '3인', '4인', '5인', '6인 이상'];

export const CapacitySelector = () => {
  const { control, setValue } = useFormContext<Product>();

  const handlemuiselectonchange = (e) => {
    if (e.target.value.length > 2) {
      alert('최대 2개까지 선택 가능합니다.');
    } else {
      setValue('capacities', e.target.value.sort());
    }
  };

  return (
    <Controller
      control={control}
      name="capacities"
      defaultValue={[]}
      render={({ field }) => (
        <FormControl>
          <InputLabel id="capacities">사용 권장 인원</InputLabel>
          <Select
            label="사용 권장 인원"
            labelId="capacities"
            {...field}
            multiple
            onChange={handlemuiselectonchange}
            renderValue={(selected) => (
              <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
                {selected.map((value) => (
                  <Chip key={value} label={capacityOptions[value]} />
                ))}
              </Box>
            )}
          >
            <FormHelperText>&nbsp;&nbsp; 최대 2개</FormHelperText>
            {capacityOptions.map((text, i) => (
              <MenuItem key={i} value={i}>
                {text}
              </MenuItem>
            ))}
          </Select>
        </FormControl>
      )}
    />
  );
};