react taro-ui AtInput 组件输入文字后光标总跳到第一位的问题修复
在微信小程序内,相应的文本框每输入一个字符后,总是跳回到第一位,影响使用;后,问题解决,在输入框的一串文字中间删除和加入文字,光标也没有乱跳,问题修复;
·
react taro-ui AtInput 组件输入文字后光标总跳到第一位,影响小程序的使用,原始组件代码如下:
import React, {useState} from 'react';
import { View, Picker } from '@tarojs/components';
import {useDispatch} from 'react-redux';
import { AtInput, AtListItem } from 'taro-ui';
import {showToast, idNameCheck} from '@/utils/Utils';
import {Button} from '@/components';
import Constant from '@/constants/Constant';
import {addUser} from '@/services/user';
import {navigateBack} from '@/utils/Navigation';
import './index.scss'
const Page = () => {
const dispatch = useDispatch();
const [name, setName] = useState();
const [mobile, setMoble] = useState();
const [loading, setLoading] = useState();
const onSubmit = async () => {
if (loading) {
return;
}
if (!name) {
showToast('请输入姓名');
} else if (idNameCheck(name.trim()).error) {
showToast('姓名格式错误');
} else {
setLoading(true);
const params = {
cert_name: name.trim(),
mobile: mobile,
};
const response = await addUser(params);
setLoading(false);
if (response.success) {
dispatch({type: 'app/getUserList'});
showToast('添加成功');
navigateBack();
} else {
showToast(response.message || '操作失败');
}
}
}
return <>
<View className='user-form'>
<AtInput
name='cert_name'
title='姓名'
type='text'
placeholder='请输入姓名'
value={name}
onChange={(value) => {
setName(value);
return value;
}}
/>
</View>
<View className='user-form'>
<AtInput
name='mobile'
title='手机号码'
type='phone'
placeholder='请输入手机号码'
value={mobile}
onChange={(value) => {
setMoble(value);
return value;
}}
/>
</View>
<View className='user-footer'>
<Button full type='primary' loading={loading} onClick={onSubmit}>提交</Button>
</View>
</>
};
export default Page;
在微信小程序内,相应的文本框每输入一个字符后,总是跳回到第一位,影响使用;后面增加了cursor={-1} 后,问题解决,在输入框的一串文字中间删除和加入文字,光标也没有乱跳,问题修复;
<View className='user-form'>
<AtInput
name='cert_name'
title='姓名'
type='text'
placeholder='请输入姓名'
value={name}
onChange={(value) => {
setName(value);
return value;
}}
cursor={-1}
/>
</View>
<View className='user-form'>
<AtInput
name='mobile'
title='手机号码'
type='phone'
placeholder='请输入手机号码'
value={mobile}
onChange={(value) => {
setMoble(value);
return value;
}}
cursor={-1}
/>
</View>
更多推荐
所有评论(0)