taro中textarea组件存在的两个问题:
- 由于层级过高导致文字穿透,解决办法如下,组件本质还是使用“替代元素”;
- 在ios机型下输入内容后,ios距离文本框边距较大
import Taro, { useState } from '@tarojs/taro'
import { View, Text, Textarea } from '@tarojs/components'
import classnames from 'classnames'
//获取机型
const { platform = null } = Taro.getSystemInfoSync()
export default function SimulationTextarea ({ value, maxlength, placeholder, autoFocus, onBlur, onTextarea }) {
const [myValue, setMyValue] = useState(value)
const [isShowTextarea, setIsShowTextarea] = useState(false)
const [isAutoFocus, setIsAutoFocus] = useState(autoFocus)
const onSimulationClick = () => {
setIsShowTextarea(true)
setIsAutoFocus(true)
}
const onTextareaBlur = (e) => {
setIsShowTextarea(false)
setIsAutoFocus(false)
onBlur(e)
}
const onTextareaInput = (e) => {
setMyValue(e.detail.value)
onTextarea(e.detail.value)
}
return (
//设置ios下的样式“simulation-textarea-ios”
<View className={classnames('simulation-textarea', {'simulation-textarea-ios': platform === 'ios'})} onClick={onSimulationClick}>
{
isShowTextarea
?
<Textarea
className='simulation-textarea__textarea simulation-textarea-native'
value={myValue}
maxlength={maxlength}
placeholder={placeholder}
autoFocus={isAutoFocus}
onBlur={onTextareaBlur}
onInput={onTextareaInput}
cursor-spacing={50}
placeholder-style='fontSize: 28px; color: #D8D8D8'
/>
:
<View className={classnames('simulation-textarea__textarea simulation-textarea-shadow', {'simulation-textarea-placeholder': !myValue})}>
<Text decode={1}>{myValue !== '' ? myValue : placeholder}</Text>
</View>
}
{
maxlength === '-1'
?
null
:
<View className='simulation-textarea-count'>({myValue.length}/{maxlength})</View>
}
</View>
)
}
SimulationTextarea.options = {
addGlobalClass: true
}
SimulationTextarea.defaultProps = {
maxlength: '-1',
placeholder: '请输入内容',
value: '',
autoFocus: false,
onBlur () {},
onTextarea () {},
}