React Native输入框：如何在有内容且失焦时触发指定埋点事件

我有一个搜索输入框，期望触发trackButtonClickEventAction(buttonClick.MY_VEHICLES_ADD_VEHICLE_REG_INPUT)事件，但当前该事件会在用户输入单个字符时触发。需要改为输入框已输入内容且失去焦点时触发该事件。

解决思路 #

• 移除原onChange函数中触发MY_VEHICLES_ADD_VEHICLE_REG_INPUT的逻辑，避免每输入一个字符就执行埋点
• 利用输入框的onBlur事件（失去焦点时触发），在该事件中判断输入框是否有有效内容，满足条件再触发目标埋点
• 给React Hook Form的Controller组件添加onBlur属性，绑定自定义的失焦处理逻辑

修改后的代码 #

1. 更新onChange函数（移除失焦埋点逻辑）

const onChange = (args) => {
  const inputValue = args[0].nativeEvent.text;

  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;
};

2. 添加onBlur失焦处理函数

const onBlur = () => {
  // 仅当输入框有非空白内容时触发目标埋点
  if (state.reg.trim().length > 0) {
    console.log(buttonClick.MY_VEHICLES_ADD_VEHICLE_REG_INPUT);
    trackButtonClickEventAction(buttonClick.MY_VEHICLES_ADD_VEHICLE_REG_INPUT);
  }
};

3. 更新Controller组件（绑定onBlur事件）

<Controller
  as={<InputField />}
  control={control}
  label="Number plate"
  name="reg"
  value={state.reg}
  defaultValue={state.reg}
  onChange={onChange}
  onBlur={onBlur} // 绑定失焦处理逻辑
  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>
  }
/>

内容的提问来源于stack exchange，提问作者Bomber