React Native自定义数字键盘及TextInput焦点切换问题求助

1. 统一维护当前聚焦输入框 #

不用给每个TextInput单独写重复的onFocus逻辑，我们可以通过状态+ref集合来全局管理当前活跃的输入框：

首先定义输入框的ref集合和当前聚焦的key状态：

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

export default function StudentScoreForm() {
  // 存储三个输入框的ref，按姓名、SAT、GRE的顺序
  const inputRefs = {
    name: useRef(null),
    sat: useRef(null),
    gre: useRef(null),
  };
  // 记录当前聚焦的输入框key，默认初始聚焦姓名框
  const [currentFocusKey, setCurrentFocusKey] = useState('name');

  // 统一的聚焦处理函数
  const handleInputFocus = (key) => {
    setCurrentFocusKey(key);
  };

然后给每个TextInput绑定ref和onFocus：

return (
    <>
      <TextInput
        ref={inputRefs.name}
        onFocus={() => handleInputFocus('name')}
        placeholder="学生姓名"
      />
      <TextInput
        ref={inputRefs.sat}
        onFocus={() => handleInputFocus('sat')}
        placeholder="SAT成绩"
        keyboardType="numeric"
      />
      <TextInput
        ref={inputRefs.gre}
        onFocus={() => handleInputFocus('gre')}
        placeholder="GRE成绩"
        keyboardType="numeric"
      />

2. 实现「下一个」按钮的焦点切换 #

先定义输入框的顺序数组，点击按钮时根据当前key找到下一个输入框，调用其focus方法：

{/* 下一个按钮 */}
      <Button 
        title="下一个" 
        onPress={() => {
          const inputOrder = ['name', 'sat', 'gre'];
          const currentIdx = inputOrder.indexOf(currentFocusKey);
          // 不是最后一个输入框时才切换
          if (currentIdx < inputOrder.length - 1) {
            const nextKey = inputOrder[currentIdx + 1];
            inputRefs[nextKey].current?.focus();
            setCurrentFocusKey(nextKey);
          }
        }} 
      />
    </>
  );
}

3. 自定义数字键盘的输入处理 #

针对自定义数字键盘，推荐用状态管理输入值（符合React数据流设计），也可以直接操作输入框快速实现：

方式1：状态管理输入值（推荐） #

先定义输入值状态，绑定到每个TextInput的value：

const [inputValues, setInputValues] = useState({
  name: '',
  sat: '',
  gre: '',
});

// 数字点击处理
const handleNumberTap = (num) => {
  setInputValues(prev => ({
    ...prev,
    [currentFocusKey]: prev[currentFocusKey] + num
  }));
};

// TextInput绑定value和onChangeText
<TextInput
  ref={inputRefs.sat}
  onFocus={() => handleInputFocus('sat')}
  placeholder="SAT成绩"
  keyboardType="numeric"
  value={inputValues.sat}
  onChangeText={(text) => setInputValues(prev => ({...prev, sat: text}))}
/>

方式2：直接操作输入框（快速实现） #

const handleNumberTap = (num) => {
  const activeInput = inputRefs[currentFocusKey].current;
  if (activeInput) {
    // 获取当前输入框的文本，拼接新数字
    const newText = (activeInput._lastNativeText || '') + num;
    activeInput.setText(newText);
  }
};

核心注意点 #

• 确保inputOrder数组的顺序和TextInput的渲染顺序完全一致，否则切换逻辑会出错。
• 使用?.可选链避免输入框未挂载时调用focus的报错。
• 优先用状态管理输入值，而非直接操作输入框DOM，这样更符合React单向数据流的设计，也能避免一些不可预测的bug。

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