smartUi FieId组件的type为number时,focus设置不生效

小程序开发相关产品技术讨论,包括面板、智能小程序、React Native、Ray跨端框架、Panel SDK、微信小程序、小程序开发工具(IDE)及其他开发技术相关等话题


Post Reply
wdd
Posts: 1

import React, { useState, useRef } from 'react';
import { View, navigateBack } from '@ray-js/ray';
import { NavBar, Field } from '@ray-js/smart-ui';
import { NoticeTip } from '@/components';
import styles from './index.module.less';

export function Password(props) {
const { query } = props.location;
const noticeTipRef = useRef(null);
const [focusIndex, setFocusIndex] = useState(0);
const [password, setPassword] = useState(['', '', '', '']);

const onClickLeft = () => {
navigateBack();
};

const handleInputChange = (e, index) => {
const value = e.detail;
const filtered = value.replace(/[0-9]/g, '');
if (filtered) {
setFocusIndex(index + 1);
}
setPassword(prev => {
const newArray = [...prev];
newArray[index] = filtered;
return newArray;
});
};

return (
<>
<NavBar
title="密码"
leftArrow
onClickLeft={onClickLeft}
custom-class={styles['nav-bar']}
placeholder
fixed
border={false}
/>
<NoticeTip ref={noticeTipRef} />
<View>{JSON.stringify(password)}</View>
<View className={styles.container}>
<View className={styles.body}>
{password.map((item, index) => (
<View key={index} className={styles['input-box']}>
<Field
value={item}
focus={focusIndex === index}
type="number"
hiddenLabel
label=""
placeholder=""
inputAlign="center"
maxlength={1}
onInput={e => handleInputChange(e, index)}
center
holdKeyboard
disableDefaultPadding
/>
</View>
))}
</View>
</View>
</>
);
}

export default Password;


Tags:
xiaoqi
Posts: 82

Re: smartUi FieId组件的type为number时,focus设置不生效

目前小程序原生不支持自动 focus ,后续这些属性会下掉

18559697016
Posts: 124

Re: smartUi FieId组件的type为number时,focus设置不生效

Code: Select all

                <Field
                  value={timeValue}
                  placeholder="10"
                  placeholderStyle={{ color: '#0074FF', fontSize: '15px' }}
                  onChange={handleTimeValueChange}
                  inputAlign='center'
                  adjustPosition={false}
                  hiddenLabel={true}
                  className={styles.inputStyle}
                  type='number'
                  customStyle={{
                    color: '#FFFFFF',
                    fontSize: '15px',
                    display: 'flex',
                    flexDirection: 'row',
                    backgroundColor: 'black',
                    height: '40px',
                    borderRadius: '20px',
                    alignItems: 'center',
                    justifyContent: 'center',
                    minHeight: '40px',
                    maxHeight: '40px',
                    overflow: 'hidden',
                    width: '95px',
                    marginLeft: '8px',
                  }}
                />

iOS真机上面。会出现问题。 Field获取焦点以后,整个界面会向上移动,键盘弹出。点击Done后,键盘收起后,整个界面也不会退回来,导致导航栏显示不全。具体看附件。

IMG_DB0F363B1FAA-1.jpeg
IMG_1534.PNG
导航.png
Last edited by 18559697016 on 2025年 Nov 21日 18:00, edited 1 time in total.
xiaoqi
Posts: 82

Re: smartUi FieId组件的type为number时,focus设置不生效

需要 index.config.ts 内设置 disableScroll: false 否则会无法滚动回来 这个后续基础库会修复 但是目前暂时只能这么处理

18559697016
Posts: 124

Re: smartUi FieId组件的type为number时,focus设置不生效

已配置了
还是有bug

ts.png
IMG_0291F08ECC0D-1.jpeg
Post Reply