React Native中如何实现点击按钮时聚焦TextInput组件

你提到的autoFocus确实仅在组件首次挂载时生效，状态更新不会触发重新聚焦。要实现点击按钮切换到可编辑状态并自动获取焦点，通过useRef获取TextInput实例，结合useEffect监听状态变化手动调用聚焦方法是最可靠的方案。

修改后的完整代码 #

import { FunctionComponent, useRef, useEffect } from 'react';
import { View, TextInput, TextInputProps, StyleSheet } from 'react-native';

interface InputTextBoxProps {
  editingState: boolean;
}

type InputProps = TextInputProps & InputTextBoxProps;

const InputTextBox: FunctionComponent<InputProps> = ({ editingState, ...props }) => {
  // 创建TextInput的引用
  const inputRef = useRef<TextInput>(null);

  // 监听editingState变化，当变为true时触发聚焦
  useEffect(() => {
    if (editingState && inputRef.current) {
      // 确保输入框可编辑后再调用聚焦
      inputRef.current.focus();
    }
  }, [editingState]);

  return (
    <View>
      <TextInput
        {...props}
        ref={inputRef} // 绑定引用
        multiline={true}
        style={styles.textStyle}
        editable={editingState}
      />
    </View>
  );
};

// 补充样式示例
const styles = StyleSheet.create({
  textStyle: {
    borderWidth: 1,
    borderColor: '#ccc',
    padding: 8,
    minHeight: 100,
  },
});

export default InputTextBox;

关键说明 #

• useRef获取实例：inputRef会保存TextInput的原生组件实例，让我们能直接调用组件的原生方法。
• useEffect监听状态：当editingState从false变为true时，触发副作用逻辑，调用focus()方法强制输入框获取焦点。
• 移除无效的autoFocus：原代码中autoFocus={editingState}在状态更新时不会生效，直接移除即可避免混淆。

使用示例 #

在父组件中控制editingState状态，点击按钮切换即可：

import { useState } from 'react';
import { View, Button } from 'react-native';
import InputTextBox from './InputTextBox';

const ParentComponent = () => {
  const [isEditing, setIsEditing] = useState(false);

  return (
    <View style={{ padding: 20 }}>
      <Button title="开始编辑" onPress={() => setIsEditing(true)} />
      <InputTextBox editingState={isEditing} placeholder="点击按钮开始编辑" />
    </View>
  );
};

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