Textarea

版本要求:

@ray-js/ray≥0.5.10

描述

文本域，用于多行文本输入与编辑。

属性

属性	类型	必填	默认值	说明
`name`	string	否	-	表单控件名称，提交表单时作为键名
`value`	string	否	-	输入框的内容
`placeholder`	string	否	-	输入框为空时占位符
`placeholderStyle`	string \| any	否	-	指定 placeholder 的样式，目前仅支持 color、fontSize 和 fontWeight（对象或 CSS 声明字符串）
`disabled`	boolean	否	false	是否禁用
`maxLength`	number	否	140	最大输入长度，设置为 -1 的时候不限制最大长度
`autoHeight`	boolean	否	false	是否自动增高，设置 autoHeight 时，style.height 不生效
		否	-	当键盘输入时触发
		否	-	输入框聚焦时触发
		否	-	输入框失去焦点时触发
		否	-	输入框行数变化时触发，detail 含 height、lineCount 等

示例代码

基础用法

import React from 'react';
import { Textarea, View } from '@ray-js/ray';

export default function () {
  return (
    <View style={{ padding: '20px' }}>
      <Textarea placeholder="请输入内容..." />
    </View>
  );
}

多行输入

import React, { useState } from 'react';
import { Textarea, Button, View, Text } from '@ray-js/ray';

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

  return (
    <View style={{ padding: '20px' }}>
      <View style={{ marginBottom: '16px' }}>
        <Textarea
          value={value}
          placeholder="请输入..."
          maxLength={200}
          onInput={(e) => setValue(e.value)}
          style={{ marginTop: '8px', minHeight: '80px' }}
        />
        <Text style={{ marginTop: '8px', fontSize: '12px', color: '#999' }}>
          已输入 {value.length} / 200 字符
        </Text>
      </View>
      <View style={{ marginBottom: '16px' }}>
        <Text>自动增高:</Text>
        <Textarea
          autoHeight
          placeholder="输入内容会自动增高..."
          style={{ marginTop: '8px', minHeight: '40px' }}
        />
      </View>
    </View>
  );
}

禁用与事件

import React from 'react';
import { Textarea, View, Text } from '@ray-js/ray';

export default function () {
  return (
    <View style={{ padding: '20px' }}>
      <View style={{ marginBottom: '16px' }}>
        <Text>禁用状态:</Text>
        <Textarea
          disabled
          value="不可编辑的内容"
          placeholderStyle={{ color: '#ccc' }}
          style={{ marginTop: '8px' }}
        />
      </View>
      <View style={{ marginBottom: '16px' }}>
        <Text>事件监听:</Text>
        <Textarea
          name="feedback"
          placeholder="输入反馈内容..."
          onFocus={(e) => console.log('聚焦:', e.detail.value)}
          onBlur={(e) => console.log('失焦:', e.detail.value)}
          onLinechange={(e) => console.log('行数变化:', e.detail.lineCount)}
          style={{ marginTop: '8px', minHeight: '80px' }}
        />
      </View>
    </View>
  );
}