Reputation: 1
I'm trying a simple example of dynamic input formatting if input = 3 => save text, else - text old
:
const [text, setText] = useState('');
return(
<View>
<TextInput
value={text}
onChangeText={innerText => {
if (innerText === '3')
setText(innerText);
}}
/>
</View>)
What happens:
I enter anything, try to correct the input - I get the input blinking for a few seconds - the value that I enter from the keyboard appears for a moment, then returns to the previous state, thanks to the "filter" in onChangeText
(for example, you can enter only the number 3, and when entering the rest - I actually see all the characters that I enter for some time, and only then they are erased in accordance with the value).
How to avoid this?
How to avoid this? I tried a bunch of ways:
onChangeText
to onChange
onChangeText
to onKeyPress
and all their combinationsuseEffect
(the first was set in value, the second was set in onChangeText
, and in useEffect
I equated them)defaultValue
does not suit my tasksmaxLength
does not suit my tasks, as well as editable = falsereact-native-text-input-mask
and react-native-advanced-input-mask
work well for me, because they are direct wrappers over native inputs (a wrapper over a native input would be perfect for me), but in the first one my customNotations
crash on Android, and in the second one if I open <Modal>, then my value disappears, as if the value is empty, although I made a <Text> component next to it that duplicates the value, and the value itself is fine, it is simply reset inside the component, and if I use defaultValue
, then onChangeText
will be called twice, which greatly breaks the processing logic
I'm desperate, what should I do with this, please tell me! I need something that will help process and replace user input BEFORE it is displayedUpvotes: 0
Views: 122