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>

Logo

腾讯云面向开发者汇聚海量精品云计算使用和开发经验,营造开放的云计算技术生态圈。

更多推荐