I am programmatically clearing the TextInput’s value via .clear()
method.
I also subscribed my state to onChangeText
but on .clear()
invocation, my state doesn’t change.
Why .clear()
doesn’t trigger onChangeText
? Isn’t it changing the text value?
Example:
function MyComponent() {
const [value, setValue] = useState("");
const ref = useRef();
const handlePress = () => {
ref.current.clear();
};
return (
<View>
<TextInput onChangeText={setValue} ref={ref} />;
<Button
title="clear"
onPress={handlePress} // <<< when this is called, onChangeText doesn't called?
/>
</View>
);
}
>Solution :
In general across multiple different APIs and event systems, when you change the value of a field/control via code, it doesn’t trigger any event handlers related to that change. (There are APIs/systems that are exception to that general rule, but they’re rare.) The event handlers are there for when the change is done via the user operating on the field/control in the UI. For example, with a DOM input
element, setting the value
property changes the value, but doesn’t trigger any events (such as change
or input
); submitting a form via its submit
function doesn’t trigger a submit
event. React Native is just following the same pattern in their fields/controls.