src/Textarea.js File

import React,{PropTypes} from 'react';
import Component from './utils/Component';
import classnames from 'classnames';
import {setPhoenixPrefix} from './utils/Tool';

/**
 * <h5>表单组件，主要包括组件:</h5>
 * <strong><a href='../classes/Input.html'>Input 文本框/单选框/多选框</a></strong><br/>
 * <strong><a href='../classes/Textarea.html'>Textarea 多行文本框</a></strong><br>
 * <strong><a href='../classes/FormGroup.html'>FormGroup 表单组</a></strong><br/>
 * <strong><a href='../classes/Switch.html'>Switch 开关</a></strong><br>
 * <h6>点击以上链接或者左侧导航栏的组件名称链接进行查看</h6>
 * @module 表单组件
 * @main 表单组件
 * @static
 */
/**
 * 多行文本框组件<br/>
 * - 使用方式跟原生一致。
 * - 可通过defaultValue设置默认值,如果是通过请求获得的数据请使用value，defaultValue只有初始赋值有效。 
 * - 可通过value和onChange事件配合使用手动设置输入值。
 * - 可通过设置count判断是否显示当前输入字数。
 * - 可通过设置maxLength配置最大输入字数。
 *
 * 主要属性和接口：
 * - defaultValue:默认值 <br/>
 * 如：`<Textarea defaultValue="测试" />`
 * - value&onChange:<br/>
 * 如：`<Textarea value={this.state.value} onChange={()=>{this.setState({value:"测试"})}} />`
 * - count:是否显示当前输入字数, 默认false不显示, 配合maxLength使用<br/>
 * 如：`<Textarea count maxLength={150} />`
 *
 * @class TextArea
 * @module 表单组件
 * @extends Component
 * @constructor
 * @since 0.3.0
 * @demo textarea|textarea.js {展示}
 * @show true
 * */

export default class Textarea extends Component{

    static propTypes = {
        /**
         * 样式前缀
         * @property classPrefix
         * @type String
         * @default 'textarea'
         * */
        classPrefix: PropTypes.string,
        /**
         * 默认值
         * @property defaultValue
         * @type String
         * */
        defaultValue: PropTypes.string,
        /**
         * 值
         * @property value
         * @type String
         * */
        value: PropTypes.string,
        /**
         * 输入时执行的回调
         * @event onChange
         * @type Function
         * */
        onChange:PropTypes.func,
        /**
         * 是否显示输入计数
         * @property count
         * @type Boolean
         * */
        count: PropTypes.bool,
        /**
         * 可输入的总长度
         * @property maxLength
         * @type Number
         * */
        maxLength: PropTypes.number
    };

    static defaultProps = {
        classPrefix:'textarea',
        classMapping : {}
    };

    constructor(props, context) {
        super(props, context);

        this.state = {
            inputLength: this.getInputLength(props)
        }
    }

    getInputLength(props){
        return props.value? props.value.length: props.defaultValue? props.defaultValue.length:0;
    }

    componentWillReceiveProps(nextProps){
        let {defaultValue, value} = this.props;

        if(defaultValue != nextProps.defaultValue || value != nextProps.value){
            this.setState({
                inputLength: this.getInputLength(nextProps)
            });
        }        
    }

    onTextareaChange(event){
        this.setState({
            inputLength: event.target.value.length
        });
        if(this.props.onChange){
            this.props.onChange(event);
        }
    }

    render(){
        let {count, maxLength} = this.props;

        return (
            <div className={setPhoenixPrefix('textarea-field')}>
                <textarea {...this.props} className={classnames(
                    this.getProperty(true),
                    this.props.className
                )} onChange={(event)=>{this.onTextareaChange(event)}}></textarea>
                <span className={classnames(
                    setPhoenixPrefix('textarea-count'),
                    count? 'show':'hide'
                )}> 
                    <b className={setPhoenixPrefix('textarea-length')}>{this.state.inputLength}</b>/<b>{maxLength}</b>
                </span>
            </div>
        );
    }

}