TextArea

多行文本框组件

  • 可通过value设置默认值。
  • 可通过设置count判断是否显示当前输入字数，需要配合maxLength配置最大输入字数。
  • getValueCallback: 获取当前的输入值。
  • className属性加在外层，其余属性均赋予input元素。

主要属性和接口：

  • value:默认值
    如：<Textarea value='测试' />
  • count:是否显示当前输入字数, 默认false不显示, 配合maxLength使用
    如：<Textarea count maxLength={150} />
  • getValueCallback: 获取当前的输入值。
    如：<Textarea ref={(textElem)=>{this.textElem=textElem}} />
    this.textElem.getValueCallback();

方法

属性

事件

Extends Component
Defined in: src/textarea/index.js:20
Module: 表单组件

Available since 0.3.0

Constructor

TextArea

TextArea ()

Defined in src/textarea/index.js:20

Available since 0.3.0

Example:

import React, { Component } from "react"

import Textarea from "phoenix-ui/lib/textarea"
import Button from "phoenix-ui/lib/button"
import Code from "./code/code"

export default class textarea extends Component{

    constructor(props,context){

        super(props,context);

        this.state = {
            name:"",
            MAX_LENGTH: 100
        };
    }

    getValue(){
        this.setState({
            value: this.textElem.getValueCallback()
        });
    }

    render(){
        return(
            <div>
                <h2 className="comp-title">Textarea</h2>
                <h3 className="comp-type">count(默认false) 是否计字数<br/>count配合maxLength计数</h3>
                <div className="content">
                    <Textarea count maxLength={this.state.MAX_LENGTH} placeholder="请输入..." />
                </div>
                <Code target="textarea-count" />

                <h3 className="comp-type">value 默认值</h3>
                <div className="content">
                    <Textarea value="我是默认值" placeholder="请输入..." />
                </div>
                <Code target="textarea-value" />

                <h3 className="comp-type">disabled 不可输入</h3>
                <div className="content">
                    <Textarea value="我是默认值" count maxLength={this.state.MAX_LENGTH} placeholder="请输入..." disabled/>
                </div>
                <Code target="textarea-disabled" />

                <h3 className="comp-type">getValueCallback 获取数值</h3>
                <div className="content">
                    <Textarea placeholder="默认text" ref={(textElem)=>{this.textElem = textElem}} />
                    <div><Button onClick={this.getValue.bind(this)}>点击获取值</Button> <span style={{float:'right'}}>{this.state.value}</span></div>
                </div>
                <Code target="textarea-getvalue" />
            </div>
        );
    }
}

属性

classPrefix

String

Defined in src/textarea/index.js:48

样式前缀

Default:

'textarea'

count

Boolean

Defined in src/textarea/index.js:61

是否显示输入计数

maxLength

Number

Defined in src/textarea/index.js:67

可输入的总长度

value

String

Defined in src/textarea/index.js:55

初始值