Tuya Developer Forum

Code: Select all

"@ray-js/ray": "^1.4.45",
"@ray-js/panel-sdk": "^1.10.0",

Code: Select all

import React from 'react';
import { View, ScrollView, CheckboxGroup, Label, Checkbox } from '@ray-js/ray';
import styles from './index.module.less';

export function Home() {
  const changeA = e => {
    console.log('changeA', e.detail.value);
  };
  const changeB = e => {
    console.log('changeB', e.detail.value);
  };

  return (
    <ScrollView className={styles.view} refresherTriggered={false} style={{ paddingTop: '100px' }}>
      <View style={{ padding: '48px 12px' }}>
        <CheckboxGroup onChange={changeA}>
          <Label>
            <Checkbox value="A1" />
            A1
          </Label>
          <Label>
            <Checkbox value="A2" />
            A2
          </Label>
        </CheckboxGroup>
        <CheckboxGroup onChange={changeB}>
          <Label>
            <Checkbox value="B1" />
            B1
          </Label>
          <Label>
            <Checkbox value="B2" />
            B2
          </Label>
        </CheckboxGroup>
      </View>
    </ScrollView>
  );
}

export default Home;

Code: Select all

changeA ['A1']
changeA ['A1', 'A2']
changeB ['A1', 'B1']
changeB ['A1', 'B1', 'B2']

Code: Select all

changeA ['A1']
changeA ['A1', 'A2']
changeB ['B1']
changeB ['B1', 'B2']

Code: Select all

changeA ['A2'] // 取消A1后触发，此时界面上选中项为A2,B1,B2
changeB ['A1', 'B2'] // 取消B1后触发，此时界面上选中项为A2,B2

Code: Select all

changeA ['A2']
changeB ['B2']