跳到主要内容

CheckBox 复选框

介绍​

在一组选项里多选。

用法​

基础​

普通​

const [v1, setV1] = useState([0]);
<OsCheckbox>
  <OsCheckboxOption value={v1} optionValue={0} onClick={setV1}>
    选项A
  </OsCheckboxOption>
  <OsCheckboxOption value={v1} optionValue={1} onClick={setV1}>
    选项B
  </OsCheckboxOption>
</OsCheckbox>

选项内容自定义​

const [v2, setV2] = useState([0]);
<OsCheckbox>
  <OsCheckboxOption value={v2} optionValue={0} onClick={setV2}>
    <View className='custom-option'>
      <Image
        className='custom-option__img'
        src='http://yanxuan.nosdn.127.net/25223742d4031d15c48c93a0b7b760c0.jpg?imageView&thumbnail=172x172&quality=95'
      />
      <View className='custom-option__content'>
        <View className='custom-option__title'>西装</View>
        <View className='custom-option__sub-title'>
          帅气的办公室吸睛装扮
        </View>
        <View className='custom-option__price'>￥299</View>
      </View>
    </View>
  </OsCheckboxOption>
  <OsCheckboxOption value={v2} optionValue={1} onClick={setV2}>
    <View className='custom-option'>
      <Image
        className='custom-option__img'
        src='https://yanxuan.nosdn.127.net/b3dec0eb768d27301afab1b4a43f30cb.png?quality=95&thumbnail=172x172&imageView'
      />
      <View className='custom-option__content'>
        <View className='custom-option__title'>
          网易智造四季全屋循环扇
        </View>
        <View className='custom-option__sub-title'>
          源自日本，全屋空气对流循环
        </View>
        <View className='custom-option__price'>￥248.1</View>
      </View>
    </View>
  </OsCheckboxOption>
</OsCheckbox>

禁用​

const [v1, setV1] = useState([0]);
<OsCheckbox>
  <OsCheckboxOption
    value={v1}
    optionValue={0}
    onClick={setV1}
    isDisabled
  >
    选项A
  </OsCheckboxOption>
  <OsCheckboxOption
    value={v1}
    optionValue={1}
    onClick={setV1}
    isDisabled
  >
    选项B
  </OsCheckboxOption>
</OsCheckbox>

API​

属性​

参数说明类型默认值
value选中值，必选number[] | string[]-
optionValue选项值，必选number | string-
isDisabled失效状态，可选booleanfalse

方法​

函数名说明参数
onClick点击时触发，必选value