Radio

input type='radio' 를 래핑한 컴포넌트입니다.

export function RadioBasic(){

  const value1 = useRef({value:'1'});
  const value2 = useRef({value:'2'});

  const [data, setData] = useState({
    aaa: 'a',
    bbb: value1.current
  })

  return <Frame>
    <div>data.aaa = {String(data.aaa)}</div>
    <div>data.bbb = {JSON.stringify(data.bbb)}</div>
    <div>---------------------</div>
    <Form formId="my-form" data={data} setData={setData}>
      <Flex rowDirection flexGap="10px">
        <Flex>
          <div>
            string value
          </div>
          <div>
            a : <Radio
            targetId='aaa'
            radioValue='a'
            />
            b : <Radio
            targetId='aaa'
            radioValue='b'
            />
          </div>
          <div>
            object value
          </div>
          <div>
            value1 : <Radio
            targetId='bbb'
            radioValue={value1.current}
            />
            value2 : <Radio
            targetId='bbb'
            radioValue={value2.current}
            />
          </div>
        </Flex>
      </Flex>
    </Form>
  </Frame>
}

속성 설명

targetId

targetId = keyof T

Form 에 바인딩된 T 타입에 대한 속성을 targetId 에 지정합니다. 해당 속성과 radio 가 바인딩됩니다.

radioValue

radioValue = V

radioValue 는 일반 radio 와는 다르게 타입이 자유롭습니다. string, number 또는 일반 객체나 배열도 할당이 가능하지만 내부적으로 "===" 로 비교 처리되기 때문에 레퍼런스가 바뀌면 올바르게 처리되지 않을 수 있음에 유의해야합니다.

(optional) radioName

radioName = string

radio 의 name 속성을 직접 지정할 수 있습니다. 기본적으로 targetId 와 동일하게 셋팅됩니다.

targetId 로 설정시 name 이 겹치는 경우에 사용할 수 있습니다.