Tuya Developer Forum

ray-js/ray 1.7.23

import {
stringToByte,
} from '@ray-js/robot-protocol';
import {
Input
} from '@ray-js/ray';
const [roomName, setRoomName] = useState('');
const handleChangeText = e => {
const { value } = e;
if (stringToByte(value).length > 19) return;
setRoomName(value);
};
<Input
value={roomName} //输入超出19个字节后,仍然会显示后续的输入内容
onInput={handleChangeText}
/>

你好，你的反馈已收到，我们将尽快答复你。

小程序 input 并不是完全受控组件。输入时原生 input 会优先更新内部状态，然后才触发 onInput。
因此只在 onInput 中直接 return 不能阻止内部状态变化，必须用受控回写（setState）把合法的值重新写回 input，才能真正限制输入。但是截断后的值可能和当前value相同，setRoomName的时候不会触发视图层的更新，你可以尝试给input加个key值强制重建试试

遇到同样的问题，有没有人解决一下

tangxue.li@tuya.com 2025年 Nov 14日 18:42

小程序 input 并不是完全受控组件。输入时原生 input 会优先更新内部状态，然后才触发 onInput。
因此只在 onInput 中直接 return 不能阻止内部状态变化，必须用受控回写（setState）把合法的值重新写回 input，才能真正限制输入。但是截断后的值可能和当前value相同，setRoomName的时候不会触发视图层的更新，你可以尝试给input加个key值强制重建试试

请参考该说明，如果要控制最大长度，可使用 maxLength 属性。