编辑代码

/*请完成React组件封装，能够实现如下长度展示功能封装，并且不失input原生组件能力。
 *![](https://zos.alipayobjects.com/skylark/fa965c45-088f-4a07-9f41-58af0871c0cb/attach/8107/4cb06836ae8f268b/image.png)

 *value   当前的value 值  string      
 *defaultValue    初始化的value 值 string      
 *onChange    发生改变的时候触发的回调    Function(value, e)  
 */
const MAX_LENGTH = 10;

function CounterInput({value,defaultValue,onChange}){
	const [stateValue,setStateValue] = useState(defaultValue);
    const [counter,setCounter] = useState(0);
  	
  	const handleChange = useCallback((e)=>{
      const inputValue = e.target.value;
      if(inputValue.length <= MAX_LENGTH){
      	setStateValue(inputValue);
        setCounter(inputValue.length);
      }else{
      	throw new Error('Length of input value must less then MAX_LENGTH(10)')
      }
    },[])
      //传入defaultValue时为非受控组件，否则为受控组件
    const isControlled = useMemo(()=>defaultValue === undefined,[defaultValue]);
      
	return(
    	<div style={{display:'inline-block'}}>
      		<input value={isControlled?value:stateValue} onChange={isControlled?onChange:handleChange} />
      		<span>{counter+'/'+MAX_LENGTH}</span>
        </div>	
    )
}

/*
 *编写函数`convert(money)` ，传入金额，将金额转换为千分位表示法。
 *例如：12345.6 => 12,345.6
 *要求：先评估一下时间打倒聊天窗口中
 */

//1
function convert(money){
	if(typeof money !== 'number'||money < 0 ){
    	throw new Error('...')
    }
  	const moneySplits = (money+'').split('.');
  	const left = moneySplits[0];
	const reg = /(\d)(?=(?:\d{3})+$)/g;
  	const resLeft = left.replace(reg,'$1,');
  	return resLeft + '.' + moneySplits[1];
}
//2
function convert(money){
	return money.toLocaleString();
}