React Native：FlatList内TextInput删除后程序化聚焦前项的问题

问题核心 #

添加任务项时给TextInput设autofocus=true能正常聚焦，但删除项时这招不管用——本质是删除操作后目标输入框还没完成重新渲染，直接调用focus会找不到组件实例；之前用useRef时出现的TypeError: Cannot read properties of undefined (reading 'focus')，要么是ref还没绑定到输入框，要么是FlatList组件复用搞乱了ref指向；部分场景生效不稳定，是因为没在组件更新完成的正确时机触发聚焦。

可行解决办法 #

方法1：用ref集合+等待渲染完成 #

给每个任务项的输入框单独存ref，删除后等组件重新渲染完，再调用前一项的focus方法

具体步骤：

1. 在TaskList组件里建一个存ref的对象：

const inputRefs = useRef({});

2. 给每个Task组件传唯一id和注册ref的回调：

<Task
  key={item.id}
  item={item}
  onDelete={handleDelete}
  registerRef={(ref, id) => {
    inputRefs.current[id] = ref;
  }}
/>

3. Task组件里把输入框的ref传给父组件，卸载时清理：

const Task = ({ item, onDelete, registerRef }) => {
  const inputRef = useRef(null);

  useEffect(() => {
    registerRef(inputRef.current, item.id);
    return () => {
      delete inputRefs.current[item.id];
    };
  }, []);

  return (
    <View style={{ flexDirection: 'row', gap: 8, marginVertical: 4 }}>
      <TextInput ref={inputRef} value={item.text} style={{ flex: 1, borderWidth: 1, padding: 8 }} />
      <Button title="删" onPress={() => onDelete(item.id)} />
    </View>
  );
};

4. 删除逻辑里找前一项，等渲染完再聚焦：

const handleDelete = async (deleteId) => {
  const currentList = [...tasks];
  const deleteIndex = currentList.findIndex(item => item.id === deleteId);
  // 更新列表
  setTasks(currentList.filter(item => item.id !== deleteId));
  // 等组件重新渲染完成
  await new Promise(resolve => setTimeout(resolve, 0));
  // 如果有前一项，调用聚焦
  if (deleteIndex > 0) {
    const prevItemId = currentList[deleteIndex - 1].id;
    inputRefs.current[prevItemId]?.focus();
  }
};

方法2：用React Native的UIManager强制聚焦 #

借助React Native的原生API，确保能精准找到输入框实例并聚焦

步骤：

1. 先导入需要的API：

import { UIManager, findNodeHandle } from 'react-native';

2. 在TaskList里监听列表变化，对比前后列表找出被删的项，再处理聚焦：

const TaskList = ({ tasks, onDelete }) => {
  const inputRefs = useRef({});
  const prevTasksRef = useRef(tasks);

  useEffect(() => {
    // 找出被删除的项ID
    const prevIds = prevTasksRef.current.map(item => item.id);
    const currIds = tasks.map(item => item.id);
    const deletedId = prevIds.find(id => !currIds.includes(id));
    
    if (deletedId) {
      const prevIndex = prevTasksRef.current.findIndex(item => item.id === deletedId);
      if (prevIndex > 0) {
        const prevItemId = prevTasksRef.current[prevIndex - 1].id;
        const inputNode = findNodeHandle(inputRefs.current[prevItemId]);
        if (inputNode) {
          UIManager.focus(inputNode);
        }
      }
    }
    prevTasksRef.current = tasks;
  }, [tasks]);

  // ref注册和渲染逻辑同方法1
};

关键注意点：避免FlatList复用干扰 #

FlatList默认会复用组件，可能导致ref指向错误，一定要给FlatList加extraData={tasks}，让它感知到列表变化，强制更新相关组件：

<FlatList
  data={tasks}
  renderItem={({ item }) => <Task item={item} onDelete={handleDelete} registerRef={registerRef} />}
  keyExtractor={item => item.id}
  extraData={tasks}
/>

踩坑排查 #

• 出现Cannot read properties of undefined (reading 'focus')：检查ref是不是在组件挂载后才注册的，删除时有没有等组件更新完成；
• 聚焦不稳定：确认FlatList加了extraData，别在setState之后立刻调用focus，要等组件重新渲染完再执行。

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