如何通过Ref判断TextInput是否聚焦？render方法内判断方式

嘿，我来帮你搞定这个问题！你已经通过React.createRef()拿到了TextInput的引用，要在render()里判断它是否聚焦，有两种实用的方式，我给你详细说说：

方法一：直接调用TextInput实例的isFocused()方法 #

React Native的TextInput组件实例自带了isFocused()方法，能直接返回当前是否聚焦的布尔值。你可以通过ref拿到实例后调用这个方法，注意要处理ref还未挂载的情况（比如组件初始化时this.inputRef.current是null）：

render() {
  // 用可选链操作符?.避免current为null时报错
  const isInputFocused = this.inputRef.current?.isFocused();
  
  return (
    <>
      <TextInput 
        style={[
          styles.textInput,
          // 聚焦时切换样式
          isInputFocused && styles.focusedInput
        ]} 
        ref={this.inputRef} 
        // 其他props...
      />
      {/* 根据聚焦状态显示不同内容 */}
      {isInputFocused && <Text>输入框正在被激活哦😉</Text>}
    </>
  );
}

方法二：通过状态跟踪聚焦状态 #

如果需要更主动地控制聚焦状态（比如在聚焦/失焦时触发额外逻辑），可以通过onFocus和onBlur事件更新组件状态，然后在render()里直接使用状态值：

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.inputRef = React.createRef();
    this.state = {
      isInputFocused: false
    };
  }

  handleInputFocus = () => {
    this.setState({ isInputFocused: true });
    // 这里可以加聚焦时的额外操作，比如滚动到输入框位置
  };

  handleInputBlur = () => {
    this.setState({ isInputFocused: false });
    // 失焦时的操作，比如校验输入内容
  };

  render() {
    const { isInputFocused } = this.state;
    
    return (
      <TextInput
        style={[
          styles.textInput,
          isInputFocused && styles.focusedInput
        ]}
        ref={this.inputRef}
        onFocus={this.handleInputFocus}
        onBlur={this.handleInputBlur}
        // 其他props...
      />
    );
  }
}

两种方法对比 #

• 方法一更简洁，不需要额外维护状态，适合只需要判断聚焦状态的简单场景；
• 方法二更灵活，能在状态变化时触发其他副作用，适合复杂业务场景。

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