React Native单数字输入组件开发：聚焦样式不生效求助

嘿，我来帮你梳理下这个问题～你现在遇到的核心问题是直接操作子组件TextInput的state不符合React组件设计原则，React里每个组件的状态应该由自身管理，你直接调用textInput.setState()不会触发组件重新渲染，所以样式才没变化。下面给你一个完整的修正方案：

问题根源 #

你试图修改TextInput组件内部的state来更新样式，但React的数据流是单向的，父组件应该通过自身的state来控制子组件的props（包括样式），这样当父组件state变化时，子组件才会重新渲染并应用新样式。

修正后的代码 #

import React from 'react';
import { View, TextInput, Text, StyleSheet } from 'react-native';

class DigitFramedControl extends React.Component<{}, { 
  showingError: boolean; 
  errorString: string; 
  value: string; 
  focusedIndex: number | null; // 新增：记录当前聚焦的输入框索引
}> {
  // 用数组存储输入框ref，替代原来的switch写法
  digitRefs: (TextInput | null)[] = [null, null, null, null, null];

  constructor(props: {}) {
    super(props);
    this.state = {
      showingError: false,
      errorString: 'Votre réponse est erroné. Veuillez réessayer.',
      value: '     ', // 初始化为5个空格，对应5个输入框
      focusedIndex: null, // 初始无聚焦
    };
  }

  handleDigitChanged = (index: number, character: string) => {
    if (index < 0 || index >= this.state.value.length) {
      throw new Error('index out of range');
    }

    if (character.length === 0) {
      // 处理退格：清空当前位置，并聚焦到上一个输入框（如果有的话）
      const newValue = this.state.value.substr(0, index) + ' ' + this.state.value.substr(index + 1);
      this.setState({ value: newValue });
      if (index > 0) {
        this.digitRefs[index - 1]?.focus();
      }
    } else {
      // 只保留数字输入
      const digit = character.replace(/[^0-9]/g, '');
      if (digit) {
        const newValue = this.state.value.substr(0, index) + digit + this.state.value.substr(index + 1);
        this.setState({ value: newValue });
        // 跳转到下一个输入框（如果不是最后一个）
        if (index < 4) {
          this.digitRefs[index + 1]?.focus();
        }
      }
    }
  };

  onDigitFocus = (index: number) => {
    // 更新父组件state，记录当前聚焦的索引
    this.setState({ focusedIndex: index });
  };

  onDigitBlur = () => {
    // 失去焦点后清空聚焦索引
    this.setState({ focusedIndex: null });
  };

  render() {
    const sharedTextInputProps = {
      maxLength: 1,
      selectTextOnFocus: true,
      selectionColor: 'transparent',
      autoCapitalize: 'none',
      keyboardType: 'numeric', // 新增：只弹出数字键盘
    };

    return (
      <View style={{ flexDirection: 'column', height: 100, width: 300, borderWidth: 1, borderColor: '#090' }}>
        <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'space-between', borderWidth: 1, borderColor: '#600' }}>
          {/* 用循环生成输入框，避免重复代码 */}
          {Array.from({ length: 5 }).map((_, index) => (
            <TextInput
              key={index}
              ref={(ref) => this.digitRefs[index] = ref}
              {...sharedTextInputProps}
              onChangeText={(text) => this.handleDigitChanged(index, text)}
              onFocus={() => this.onDigitFocus(index)}
              onBlur={this.onDigitBlur}
              style={[
                styles.digitFramedControlDigit,
                // 根据当前聚焦索引动态设置样式
                this.state.focusedIndex === index ? { backgroundColor: 'green' } : {}
              ]}
              returnKeyType={index === 4 ? 'done' : 'next'}
              defaultValue={this.state.value[index]}
            />
          ))}
        </View>
        {this.state.showingError && (
          <Text style={styles.digitFrameErrorString}>{this.state.errorString}</Text>
        )}
        <Text>{this.state.value}</Text>
      </View>
    );
  }
}

// 补充样式定义（示例）
const styles = StyleSheet.create({
  digitFramedControlDigit: {
    width: 50,
    height: 40,
    borderWidth: 1,
    borderColor: '#ccc',
    textAlign: 'center',
    fontSize: 18,
  },
  digitFrameErrorString: {
    color: 'red',
    marginTop: 8,
    textAlign: 'center',
  },
});

export default DigitFramedControl;

关键优化点说明 #

1. 用state管理聚焦状态：新增focusedIndex字段，通过父组件state的变化触发子组件重新渲染，从而更新样式。
2. 简化输入框ref管理：用数组digitRefs存储所有输入框的ref，替代原来的switch判断，代码更简洁。
3. 优化输入逻辑：
   • 限制只允许输入数字（通过keyboardType: 'numeric'和字符过滤）
   • 完善退格逻辑：清空当前输入并聚焦到上一个输入框
4. 避免重复代码：用循环生成5个TextInput，减少冗余代码。
5. 修正样式绑定问题：原来的代码里部分TextInput重复写了style属性，现在统一动态绑定样式。

额外建议 #

如果你的项目已经支持函数组件和Hooks，建议改用useState和useRef来实现，代码会更简洁易维护～

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