智能小程序 Ray 开发——表单组件 CheckboxGroup 和 Form 实操讲解

CheckboxGroup

多项选择器组，内部由多个 checkbox 组成。

导入

import { CheckboxGroup } from '@ray-js/ray';

属性说明

属性	类型	是否必填	默认值	说明	支持平台
options	CheckboxOption[]	是		群组项 (Web 端非必填)	涂鸦、微信、RN、Web
disabled	boolean	否	false	是否禁用	涂鸦、微信、RN、Web
onChange	(event: { type: 'change'; value: string[] }) => void	否		选中项发生改变时触发 change 事件	涂鸦、微信、RN、Web

CheckboxOption

群组选择项

属性	类型	默认值	说明
label	string		跟随文本内容
value	string		checkbox 的 Value
checked	boolean	false	当前是否选中
disabled	boolean	false	是否禁用
color	string	'#007AFF'	Checkbox 的颜色，同 css 的 color

示例代码

基本使用

import React from 'react';
import { CheckboxGroup, Label, Checkbox } from '@ray-js/components';
 
export default function () {
  const changeCheckbox = (e) => {
    console.log('CheckboxGroup的 onChange事件触发', e.detail);
  };
  const options = [
    { label: 'Apple', value: 'Apple', color: '#ff00ff' },
    { label: 'Pear', value: 'Pear', checked: true },
    { label: 'Orange', value: 'Orange', disabled: true },
  ];
  return (
    <CheckboxGroup onChange={changeCheckbox}>
      {options.map((item, index) => (
        <Label key={index + '_' + item.value}>
          <Checkbox
            value={item.value}
            checked={item.checked}
            disabled={item.disabled}
            color={item.color}
          />
          {item.label}
        </Label>
      ))}
    </CheckboxGroup>
  );
}

 👉 立即免费领取开发资源，体验涂鸦 MiniApp 小程序开发。 

Form

表单。将组件内的用户输入的 input，textarea，checkbox-group，radio-group，picker，switch，slider 提交。

当点击 form 表单中 form-type 为 submit 的 button 组件时，会将表单组件中的 value 值进行提交，需要在表单组件中加上 name 来作为 key。

导入

import { Form } from '@ray-js/ray';

属性说明

属性名	类型	默认值	必填	说明	支持平台
onSubmit	eventhandle		否	携带 form 中的数据触发 submit 事件，event.detail 中可以取到 name 对应表单项的值	Web
onReset	eventhandle		否	表单重置时会触发 reset 事件	Web

示例代码

• style.less

label {
  display: block;
}
 
.item-wrap {
  margin: 16px 0;
  padding: 10px 0;
  border-bottom: 1px solid var(--ty-native-checkbox-border);
}
 
.btn-line + .btn-line {
  margin-top: 10px;
}

基本使用

import './style.less';
 
import React, { useState } from 'react';
import {
  Button,
  CheckboxGroup,
  Input,
  Switch,
  Text,
  View,
  Form,
} from '@ray-js/components';
 
export default function () {
  const [resultData, setResultData] = useState({});
  return (
    <>
      <Form
        onReset={(e) => {
          console.log('e', e);
          setResultData({});
        }}
        onSubmit={(e) => {
          console.log('e', e);
          setResultData(e.value);
        }}
      >
        <View className="item-wrap">
          <Text className="page-section-title section-title">switch</Text>
          <Switch name="switch"></Switch>
        </View>
        <View className="item-wrap">
          <Text className="page-section-title section-title">checkbox</Text>
          <CheckboxGroup
            name="CheckboxGroup"
            options={[
              {
                label: '选项一',
                value: '选项一',
              },
              {
                label: '选项二',
                value: '选项二',
              },
            ]}
          />
        </View>
        <View className="item-wrap">
          <Text className="page-section-title section-title">input</Text>
          <View className="tyui-cell">
            <Input className="tyui-input" name="input" placeholder="请输入" />
          </View>
        </View>
 
        <View className="btns-wrap">
          <View className="btn-line">
            <Button
              formType="submit"
              id="triggerBtn"
              dataInfo="提交的按钮"
              type="primary"
              className="submit-btn"
            >
              提交
            </Button>
          </View>
          <View className="btn-line">
            <Button
              formType="reset"
              id="resetBtn"
              dataInfo="reset的按钮"
              className="reset-btn"
            >
              重置
            </Button>
          </View>
        </View>
 
        <View className="result-wrap">
          {Object.keys(resultData || {}).map((k) => {
            return (
              <View className="result-item" key={k}>
                <Text className="result-name">{k}: </Text>
                <Text>{String(resultData[k])}</Text>
              </View>
            );
          })}
        </View>
      </Form>
    </>
  );
}

 👉 立即免费领取开发资源，体验涂鸦 MiniApp 小程序开发。