taro-material/h5/Textarea/index.js

Mini Program components that implement Google's Material Design.

import Nerv from "nervjs";
import Taro, { Component } from "@tarojs/taro-h5";

import { View } from '@tarojs/components';
import classNames from 'classnames';

import AtTextarea from "../components/textarea/index";

import './Textarea.scss';

class RMTextarea extends Component {
  constructor(props) {
    super(props);
    this.state = {
      show: false
    };
  }

  handleChange(value) {
    const { onChange } = this.props;
    onChange(value);
  }
  handleClick() {
    this.setState({
      show: true
    });
  }
  handleBlur() {
    this.setState({
      show: false
    });
  }
  render() {
    const { show, square, value, placeholder, maxlength } = this.props;
    const length = value ? value.length : 0;
    const countText = `${length}/${maxlength}`;
    return <View className="root">
        {show ? <View className="textareaBox">
            <AtTextarea value={value} onChange={this.handleChange.bind(this)} maxlength={maxlength} placeholder={placeholder} autoFocus={show} onBlur={this.handleBlur.bind(this)} />
          </View> : <View onClick={this.handleClick.bind(this)} className={classNames({ fakeTextarea: true, rounded: !square })}>
            <View className="text">
              {value || <View className="placeholder">{placeholder}</View>}
            </View>
            <View className="count">{countText}</View>
          </View>}
      </View>;
  }
}

RMTextarea.defaultProps = {
  value: '',
  onChange: () => {},
  maxlength: 200,
  placeholder: '请输入...',
  square: false
};

export default RMTextarea;