[英]React Native, set state onChange check value
I have a search input, I would like to fire the event, trackButtonClickEventAction(buttonClick.MY_VEHICLES_ADD_VEHICLE_REG_INPUT)
when the user interacts with the field.我有一个搜索输入,我想在用户与该字段交互时触发事件
trackButtonClickEventAction(buttonClick.MY_VEHICLES_ADD_VEHICLE_REG_INPUT)
。 However, the event is fired when the user enters a digit, I would like to fire the event when a number has been entered and the input loses focus, any ideas?但是,当用户输入数字时会触发事件,我想在输入数字并且输入失去焦点时触发事件,有什么想法吗?
const onChange = (args) => {
const inputValue = args[0].nativeEvent.text;
if (state.reg.length === 0) {
console.log(buttonClick.MY_VEHICLES_ADD_VEHICLE_REG_INPUT);
trackButtonClickEventAction(
buttonClick.MY_VEHICLES_ADD_VEHICLE_REG_INPUT,
);
}
if (inputValue) {
console.log(buttonClick.MY_VEHICLES_ADD_VEHICLE_REG);
trackButtonClickEventAction(buttonClick.MY_VEHICLES_ADD_VEHICLE_REG);
setState((prevState) => ({
...prevState,
reg: inputValue,
disableButton: false,
}));
} else {
setState((prevState) => ({
...prevState,
reg: '',
disableButton: true,
}));
}
return inputValue;
};
Controller: Controller:
<Controller
as={<InputField />}
control={control}
label="Number plate"
name="reg"
value={state.reg}
defaultValue={state.reg}
onChange={onChange}
rules={{ required: true }}
errorMessage={getError(errors.reg)}
resetOnEmpty
rightIcon={
<TouchableOpacity
activeOpacity={0.8}
onPress={() => {
handleSubmit(onSubmit)();
console.log(buttonClick.MY_VEHICLE_ADD_VEHICLE_INPUT_BUTTON);
trackButtonClickEventAction(
buttonClick.MY_VEHICLE_ADD_VEHICLE_INPUT_BUTTON,
);
}}
style={forms.rightIcon}>
<Icon
name="search"
size={32}
color="#707070"
style={forms.searchStyle}
/>
</TouchableOpacity>
}
/>
You can make use of the onBlur
property.您可以使用
onBlur
属性。 onBlur
will get called when the input
loses focus. onBlur
将在input
失去焦点时被调用。
<input
onBlur={(e) => {
console.log('input lost focus', e);
}}
onFocus={(e) => {
console.log('input gained focus', e);
}}
/>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.