问题描述：在登录界面，输入账号密码时光标一直定位在前面，导致输入的数据是反过来的
- 使用的是taro + react， 用的是taro的组件<AtInput />
- 手机信息
代码： formSubmit(e, 1)} onReset={formReset}>
{ setLoginName(e) }}
>
{ setPasswd(e) }}
value={passwd}
>
{passwd ? { setPasswd("") }} />
:
}
{ setPasswdVisible(!passwdVisible) }} />
登录
taro + react 使用的是taro的组件AtInput
问题：小程序手机会出现光标前置到首位。
解决方法：
少数使用AtInput，在上面直接添加 cursor={-1}。
<AtInput cursor={-1} />大量使用则封装套一层。
import { AtInput } from 'taro-ui'; const CustomAtInput = (props) => { // 默认的固定参数 const fixedProps = { cursor: -1 }; // 将固定的属性与传入的属性合并 const newProps = { ...fixedProps, ...props }; return <AtInput {...newProps} />; }; export {CustomAtInput}; // 其他使用的组件重命名为AtInput import { CustomAtInput as AtInput} from "@/components/CustomerInput"同样遇到这个问题。
问题应该是受控组件更新 state 之后，底层的小程序input组件触发了重新挂载，然后taro 的 input 应该有给 cursor 默认值，所以导致光标跑到了默认值指定的位置。
我这边没有回显的需求，所以直接换成了非受控组件，让这个 input 所在的 react 组件在输入的时候，不会重新渲染即可（可以在函数里直接打印，检测渲染次数）
假设有回显需求，应该也可以通过 useRef + 一个可控的专用于触发更新的 state 结合的方式，来手动控制原生 input 的渲染。
我也碰到了相同的问题，同样是taro + react，taro的组件<AtInput />
onChange={(value) => {
name.current = value;
setFlash((data)=> {
return data + 1
})
return value;
}}