[React] Element UI 체크박스 적용

<Checkbox.Group> onChange에서 매개변수로 <Checkbox>의 name값을 받게 되어있는데, <Checkbox>에 name속성을 사용하니까 빨간줄이 생기면서 에러 출력...

No overload matches this call.

index.d.ts 파일을 까보니까 name이 없었다... 프레임워크 UI가 이럴수가 있구나...ㅎ

더보기를 열면 주석해놓은 name 부분이 없어서 추가한 것.

  // Checkbox

  interface CheckboxProps extends ElementReactLibs.ComponentProps<{}> {

    label?: string

    trueLabel?: string | number

    falseLabel?: string | number

    disabled?: boolean

    checked?: boolean

    // name?: string

    indeterminate?: boolean

    focus?: boolean

    onChange?(value?): void

  }

  interface CheckboxGroupProps extends ElementReactLibs.ComponentProps<{}> {

    min?: number | string

    max?: number | string

    size?: 'large' | 'small'

    fill?: string

    textColor?: string

    value?: any

    onChange?(value?): void

  }

  interface CheckboxButtonProps extends ElementReactLibs.ComponentProps<{}> { }

  class CheckboxGroup extends ElementReactLibs.Component<CheckboxGroupProps, {}> { }

  class CheckboxButton extends ElementReactLibs.Component<CheckboxButtonProps, {}> { }

  export class Checkbox extends ElementReactLibs.Component<CheckboxProps, {}> {

    static Group: typeof CheckboxGroup

    static Button: typeof CheckboxButton

  }

 

 

<Checkbox.Group value={form.type} onChange={(event) => handleCheck(event, "type")}>
    <Checkbox label="무제한" name="type"></Checkbox>
</Checkbox.Group>

이런식으로 엘리먼트 UI 체크박스를 사용할 수 있다.

onChange의 콜백으로 사용되는 매개변수가 특이하다. (다른 프레임워크랑 비교했을 때)

name값을 넣어주면 알아서 엘리먼트 ui가 정의한 함수에 의해 작동되는데 이게 편하다고 생각하면 편할 수 있는데

처음에는 작동방식을 몰라서 시간을 할애했다. (문서화된 가이드가 친절하지도 않음ㅠ)