React Native 自定义CustomInput组件如何绑定onFocus、onBlur实现聚焦高亮

第一步：改造CustomInput组件 #

你原来的组件仅绑定了placeholder和value两个属性，所有父组件传入的事件、其他属性都没有透传给内部的TextInput，首先按如下方式改造组件：

import { useState } from 'react';
import { TextInput } from 'react-native';

const CustomInput = (props) => {
  // 新增状态记录输入框是否聚焦
  const [isFocused, setIsFocused] = useState(false);

  // 处理聚焦事件
  const handleFocus = (e) => {
    setIsFocused(true);
    // 兼容父组件传入的自定义onFocus逻辑
    props.onFocus?.(e);
  };

  // 处理失焦事件
  const handleBlur = (e) => {
    setIsFocused(false);
    // 兼容父组件传入的自定义onBlur逻辑
    props.onBlur?.(e);
  };

  return (
    <TextInput
      // 透传所有父组件传入的属性，包含onChangeText、value等
      {...props}
      style={{
        backgroundColor: "white",
        padding: 10,
        borderWidth: 1,
        // 动态修改边框色：聚焦时高亮
        borderColor: isFocused ? "#4094ec" : "#eee",
        borderRadius: 2,
        marginBottom: 12,
        // 合并父组件传入的自定义样式，优先级最高
        ...props.style
      }}
      onFocus={handleFocus}
      onBlur={handleBlur}
    />
  );
};

export default CustomInput;

第二步：父组件调用 #

你原来的调用方式不需要做任何修改，直接沿用即可：

<CustomInput
  placeholder="Family Name"
  value={this.state.familyName}
  onChangeText={(text) => this.setState({ familyName: text })}
/>

如果需要在父组件额外添加聚焦/失焦的自定义逻辑，直接传onFocus/onBlur属性即可，不会和组件内部的高亮逻辑冲突：

<CustomInput
  placeholder="Family Name"
  value={this.state.familyName}
  onChangeText={(text) => this.setState({ familyName: text })}
  onFocus={() => console.log('输入框已聚焦')}
/>

可选优化：支持ref获取原生输入框实例 #

如果需要像你示例中那样通过ref调用原生方法，可以用forwardRef改造组件：

import { useState, forwardRef } from 'react';
import { TextInput } from 'react-native';

const CustomInput = forwardRef((props, ref) => {
  const [isFocused, setIsFocused] = useState(false);

  const handleFocus = (e) => {
    setIsFocused(true);
    props.onFocus?.(e);
  };

  const handleBlur = (e) => {
    setIsFocused(false);
    props.onBlur?.(e);
  };

  return (
    <TextInput
      ref={ref}
      {...props}
      style={{
        backgroundColor: "white",
        padding: 10,
        borderWidth: 1,
        borderColor: isFocused ? "#4094ec" : "#eee",
        borderRadius: 2,
        marginBottom: 12,
        ...props.style
      }}
      onFocus={handleFocus}
      onBlur={handleBlur}
    />
  );
});

export default CustomInput;

改造后父组件就可以正常传ref获取内部TextInput实例了。

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