TextInput

描述

• TextInput 是唤起用户键盘的基础组件。

• 当添加 multiline 属性的时候，TextInput 相当于 Web 容器中的 textarea，可以进行多行输入。

安装

$ npm install rax-textinput --save

属性

属性	类型	默认值	必填	描述	支持
multiline	boolean	-	✘	定义该属性文本框可以输入多行文字
accessibilityLabel	String	-	✘	为元素添加标识
autoComplete	boolean	-	✘	添加开启自动完成功能
autoFocus	boolean	-	✘	添加开启获取焦点
onAppear	function	-	✘	当前元素可见时触发
editable	boolean	-	✘	默认为 true 如果为 fase 则文本框不可编辑
keyboardType	string	-	✘	设置弹出哪种软键盘 可用的值有default ascii-capable numbers-and-punctuation url number-pad phone-pad name-phone-pad email-address decimal-pad twitter web-search numeric （微信小程序支持的值有：text number idcard digit）
maxLength	number	-	✘	设置最大可输入值
maxNumberOfLines	number	-	✘	当文本框为 mutiline 时设置最多的行数
numberOfLines	number	-	✘	同上设置行数
placeholder	string	-	✘	设置文本框提示
password	boolean	-	✘	文本框内容密码显示
secureTextEntry	boolean	-	✘	同上文本框内容密码显示
value	string	-	✘	文本框的文字内容 (受控)
defaultValue	string	-	✘	文本框的文字内容（非受控）
confirmType	string	-	false	设置键盘右下角按钮的文字，有效值：done（显示“完成”）、go（显示“前往”）、next（显示“下一个”）、search（显示“搜索”）、send（显示“发送”），平台不同显示的文字略有差异
onBlur	function	-	✘	文本框失焦时调用此函数。onBlur={() => console.log('失焦啦')}
onFocus	function	-	✘	文本框获得焦点时调用此函数
onChange	function	-	✘	文本框内容变化时调用此函数（用户输入完成时触发。通常在 blur 事件之后）
onChangeText	function	-	✘	触发时机和onChange一致, 区别在于该函数的参数是文本框内容
onInput	function	-	✘	文本框输入内容时调用此函数
onConfirm	function	-	✘	点击键盘完成时触发
enableNative	boolean	-	true	支付宝小程序是否使用原生组件渲染
fixed	boolean	-	false	微信小程序输入框 position 是否为 fixed

注：基础属性、事件及图片含义见组件概述。

方法

focus()

取焦点方法(小程序不支持)。

blur()

失去焦点方法(小程序不支持)。

clear()

清除文本框内容(小程序不支持)。

示例

基础用法

import { createElement, render } from "rax";
import DriverUniversal from 'driver-universal';
import TextInput from "rax-textinput";

function App() {
  return (
    <TextInput autoFocus={true} />
  );
}

render(<App />, document.body, { driver: DriverUniversal });

多行输入框

import { createElement, render } from "rax";
import DriverUniversal from 'driver-universal';
import TextInput from "rax-textinput";

function App() {
  return (
    <View style={{margin: 20}}>
      <TextInput
        multiline={true}
        numberOfLines={3}
        style={{
          height: 150,
          width: 600,
          borderWidth: 1,
          borderColor: '#dddddd',
          borderStyle: 'solid'
        }}
      />
    </View>
  );
}

render(<App />, document.body, { driver: DriverUniversal });

受控组件

import { createElement, render, useState } from "rax";
import DriverUniversal from 'driver-universal';
import View from 'rax-view';
import Text from 'rax-text';
import TextInput from "rax-textinput";

function App() {
  const [value, setValue] = useState('');

  return (
    <View style={{margin: 20}}>
      <TextInput
        value={value}
        style={{
          width: 600,
          borderWidth: 1,
          borderColor: '#dddddd',
          borderStyle: 'solid'
        }}
        onChangeText={text => setValue(text)}
      />
      <Text>Result:</Text>
      <Text>{value}</Text>
    </View>
  );
}

render(<App />, document.body, { driver: DriverUniversal });

注意

• 支付宝小程序中， input 如果父类是 position: fixed，可以加上 enableNative={false}，解决输入框错位问题。

• 微信小程序中，如果 textarea 是在一个 position:fixed 的区域，需要显示指定属性 fixed 为 true