mini-check/dist/h5/components/CustomTextArea/index.js

import Nerv from "nervjs";
import Taro, { getSystemInfoSync as _getSystemInfoSync, pageScrollTo as _pageScrollTo } from "@tarojs/taro-h5";
import { View, Text, Textarea } from '@tarojs/components';
import classnames from 'classnames';
import { CustomLabel, ItemExtra, UnEditeableView } from '../index';
import './index.scss';

class CTextArea extends Taro.Component {
  render() {
    const { itemExtra, editable, name, placeholder, term, value, onChange, help, required, defaultValue, onView, listItemChildren } = this.props;

    const [isShowText, setisShowText] = Taro.useState(true);
    const [onFocus, setonFocus] = Taro.useState(false);
    // const [textareaValue, settextareaValue] = useState(placeholder)
    //  失去焦点，存值
    const onTextearaBlur = e => {
      // settextareaValue(e.detail.value)
      onChange(e.detail.value);
    };
    //输入完成，改变显示
    const textareaConfirm = e => {
      setisShowText(true);
      setonFocus(false);
    };
    const showTextarea = () => {
      setisShowText(false);
      setonFocus(true);
    };
    const showValue = value !== undefined ? value : defaultValue || placeholder;
    if (editable === false || editable === undefined && onView) {
      return <UnEditeableView term={term} help={help} value={showValue} layout="column" listItemChildren={listItemChildren} />;
    }
    const containerCLs = classnames(['texteara-wrap', listItemChildren ? 'item-container' : 'item-container-margin']);
    return <View className={containerCLs}>
      {!isShowText ? <View className="form-textarea">
        <CustomLabel term={term} help={help} required={required} />
        {itemExtra && <View className="textarea-extra-wrap">
          <ItemExtra text={itemExtra} />
        </View>}
        <View className="text-view">
          <Textarea className="text-value" autoHeight onBlur={onTextearaBlur} onConfirm={textareaConfirm} focus={onFocus} maxlength={400} value={showValue} adjustPosition holdKeyboard onFocus={e => {
            if (Taro.getEnv() === 'WEAPP') {
              const platform = _getSystemInfoSync();
              if (!platform.system.toLocaleLowerCase().includes('ios')) {
                _pageScrollTo({
                  scrollTop: e.currentTarget.offsetTop - 40,
                  duration: 100
                });
              }
            }
          }} />
        </View>
      </View> : <View className="form-textarea" onClick={showTextarea}>
          <CustomLabel term={term} help={help} required={required} />
          {itemExtra && <View className="textarea-extra-wrap">
              <ItemExtra text={itemExtra} />
            </View>}
          <View className="text-view">
            <Text className="text-value">{showValue}</Text>
          </View>
        </View>}
    </View>;
  }

}

export default CTextArea;