TextArea

多行文本框组件

  • 使用方式跟原生一致。
  • 可通过defaultValue设置默认值,如果是通过请求获得的数据请使用value，defaultValue只有初始赋值有效。
  • 可通过value和onChange事件配合使用手动设置输入值。
  • 可通过设置count判断是否显示当前输入字数。
  • 可通过设置maxLength配置最大输入字数。

主要属性和接口：

  • defaultValue:默认值
    如：<Textarea defaultValue="测试" />
  • value&onChange:
    如：<Textarea value={this.state.value} onChange={()=>{this.setState({value:"测试"})}} />
  • count:是否显示当前输入字数, 默认false不显示, 配合maxLength使用
    如：<Textarea count maxLength={150} />
Extends Component
Defined in: src/Textarea.js:17
Module: 表单组件

Available since 0.3.0

Constructor

TextArea

TextArea ()

Defined in src/Textarea.js:17

Available since 0.3.0

Example:

import React, { Component } from "react";
import {Textarea} from "phoenix-ui";
import Code from "./code/code";

export default class textarea extends Component{

    constructor(props,context){

        super(props,context);

        this.state = {
            name:"默认值defaultValue",
            words: "value和onChange配合使用",
            MAX_LENGTH: 100
        };
    }

    setValue(key,e){
        let o ={};
        o[key || e.target.name] = e.target.value;
        this.setState(o);
    }

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

                <div className="content">
                    <h3 className="comp-tip">defaultValue 默认值</h3>
                    <Textarea defaultValue={this.state.name} placeholder="请输入..." />
                    <h3 className="comp-tip">value和onChange配合使用</h3>
                    <Textarea value={this.state.words} onChange={this.setValue.bind(this,"words")} placeholder="请输入..." />
                </div>
                <Code target="textarea" />
            </div>
        );
    }
}

属性

classPrefix

String

Defined in src/Textarea.js:45

样式前缀

Default:

'textarea'

count

Boolean

Defined in src/Textarea.js:70

是否显示输入计数

defaultValue

String

Defined in src/Textarea.js:52

默认值

maxLength

Number

Defined in src/Textarea.js:76

可输入的总长度

value

String

Defined in src/Textarea.js:58

值

事件

onChange

Function

Defined in src/Textarea.js:64

输入时执行的回调