import React, { useState, forwardRef, useEffect } from "react";
import { Input } from 'antd';

const { TextArea } = Input;

//右下角 实时动态 显示用户输入字数   
const WordsInput = forwardRef((props, _ref) => {
  const [wordCount, setWordCount] = useState(0);
  const {value} = props;

  //初始化 字数
  useEffect(()=>{
    setWordCount(value && value.length || 0);
  },[props])
  return(
    <div style={{position:'relative'}}>
      <TextArea {...props} onChange={(e)=>{setWordCount(e.target.value.length);props.onChange(e.target.value)}}/>
      <span style={{ position: 'absolute', bottom: '-4px', right: '12px', fontSize: '12px' }}>{wordCount}/{props.maxLength}</span>
    </div>
  )
})
export default WordsInput;