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

Input

输入框

导入

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

属性说明

属性	类型	默认值	说明	支持平台
className	string		样式名	涂鸦、微信
value	string		内容	涂鸦、微信
type	string	text	类型 text/number/idcard/digit	涂鸦、微信
password	boolean	false	是否为密码	涂鸦、微信
placeholder	string		占位内容	涂鸦、微信
placeholderStyle	object		placeholder 样式	涂鸦、微信
disabled	boolean	false	是否禁用	涂鸦、微信
maxLength	number		内容最大长度	涂鸦、微信
confirmType	"send" or "search" or "next" or "go" or "done"	done	设置键盘右下角按钮的文字	微信、Web
selectionStart	number	-1	光标起始位置，自动聚集时有效，需与 selectionEnd 搭配使用	微信
selectionEnd	number	-1	光标结束位置，自动聚集时有效，需与 selectionStart 搭配使用	微信
cursor	number	false	指定 focus 时的光标位置	微信、Web
onInput	func(event: any)		输入事件	涂鸦、微信
onConfirm	func(event: any)		确认事件	涂鸦、微信
onBlur	func(event: any)		丢焦事件	涂鸦、微信

 

示例代码

基本使用

import * as React from 'react';
 
import { Button, Input, View } from '@ray-js/components';
 
export default function () {
  const [value, setValue] = React.useState('');
  function handleInput(event: any) {
    console.log('onInput', event);
 
    // Input 强制受控模式，依然保持高性能表现
    setValue(event.value);
  }
 
  return (
    <React.Fragment>
      <Input
        placeholder="Your Phone Number"
        type="number"
        value={value}
        onInput={handleInput}
        onFocus={(e) => {
          console.log('onFocus', e);
        }}
        onBlur={(e) => {
          console.log('onBlur', e);
        }}
        onConfirm={(e) => {
          console.log('confirm', e);
        }}
      />
      <View
        style={{
          display: 'flex',
          justifyContent: 'space-between',
          flexDirection: 'row',
          marginTop: '10rpx',
        }}
      >
        <Button
          size="mini"
          onClick={() => {
            setValue(Math.floor(Math.random() * 123131).toString());
          }}
        >
          Update value
        </Button>
        <Button
          size="mini"
          onClick={() => {
            setValue('123456789');
          }}
        >
          Set value
        </Button>
        <Button
          size="mini"
          onClick={() => {
            console.log('clear');
            setValue('');
          }}
        >
          Clear value
        </Button>
      </View>
    </React.Fragment>
  );
}

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

 

Label

用来改进表单组件的可用性。

使用 for 属性找到对应的 id，或者将控件放在该标签下，当点击时，就会触发对应的控件。 for 优先级高于内部控件，内部有多个控件的时候默认触发第一个控件。 checkbox, radio, switch。

标签文本不仅与其相应的文本输入元素在视觉上相关联，程序中也是如此。 这意味着，当用户聚焦到这个表单输入元素时，屏幕阅读器可以读出标签，让使用辅助技术的用户更容易理解应输入什么数据。 您可以点击关联的标签来聚焦或者激活这个输入元素，就像直接点击输入元素一样。这扩大了元素的可点击区域，让包括使用触屏设备在内的用户更容易激活这个元素。 将一个 <label> 和一个 <input> 元素匹配在一起，您需要给 <input> 一个 id 属性。而 <label> 需要一个 for 属性，其值和 <input> 的 id 一样。 另外，您也可以将 <input> 直接放在 <label> 里，此时则不需要 for 和 id 属性，联系已隐含存在。

导入

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

属性说明

属性名	类型	默认值	必填	说明	支持平台
htmlFor	string		否	绑定控件的 id	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 React from 'react';
import { View, Checkbox, Text, Label } from '@ray-js/components';
import './style.less';
 
export default function () {
  return (
    <View>
      <View className="item-wrap">
        <Checkbox id="checkbox1"></Checkbox>
        <Label htmlFor="checkbox1">
          <Text>通过 for 属性控制checkbox选中状态</Text>
        </Label>
      </View>
      <View className="item-wrap">
        <Label>
          <Checkbox></Checkbox>
          <Text>label 包裹checkbox</Text>
        </Label>
      </View>
    </View>
  );
}

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