React Native Paper多步骤TextInput autoFocus异常问题求助

我之前在做类似的多步骤表单时，也碰到过React Native Paper的TextInput自动聚焦不稳定的情况，尤其是第一步正常、后面步骤随机失效的问题，咱们来一步步解决它。

问题根源分析 #

1. 组件复用导致autoFocus只触发一次：React默认会复用相同类型的组件，当你切换step时，后续步骤的TextInput可能并没有重新挂载，而autoFocus属性只有在组件首次挂载时才会生效，所以后续切换时不会自动聚焦。
2. setState的异步特性：你在submitStep1里多次调用setState，切换step的操作和其他状态更新是异步执行的，可能TextInput还没渲染完成，就已经尝试触发聚焦了。
3. Keyboard.dismiss()的干扰：在提交第一步后手动收起键盘，可能会和后续步骤的自动聚焦操作冲突，导致聚焦被打断。

最可靠的解决方案：使用Ref手动聚焦 #

手动控制聚焦是最稳妥的方式，不受组件复用和autoFocus的限制，具体步骤如下：

1. 给每个TextInput创建Ref

在类组件的构造函数里初始化三个ref，分别对应三个步骤的输入框：

constructor(props) {
  super(props);
  this.step1InputRef = React.createRef();
  this.step2InputRef = React.createRef();
  this.step3InputRef = React.createRef();
}

2. 给每个步骤的TextInput绑定Ref

修改你的displayStep1、displayStep2、displayStep3方法，把对应的ref绑定到TextInput上：

// displayStep1中的TextInput
<TextInput 
  ref={this.step1InputRef}
  label="Article" 
  value={this.state.article} 
  onChangeText={article => this.setState({article})} 
  onSubmitEditing={this.submitStep1} 
  blurOnSubmit={false} 
  style={{backgroundColor: 'transparent'}} 
/>

// displayStep2中的TextInput同理
<TextInput 
  ref={this.step2InputRef}
  // 其他属性...
/>

// displayStep3中的TextInput同理
<TextInput 
  ref={this.step3InputRef}
  // 其他属性...
/>

3. 在切换步骤后手动触发聚焦

利用setState的回调函数（这个回调会在状态更新完成、组件重新渲染后执行），调用对应ref的focus()方法：
修改submitStep1里的代码：

// 当切换到step2时
this.setState({declinaison : this.state.declinaisons[0], step: 2}, () => {
  // 确保输入框已经挂载完成，再执行聚焦
  if (this.step2InputRef.current) {
    this.step2InputRef.current.focus();
  }
});

// 当切换到step3时
this.setState({step : 3}, () => {
  if (this.step3InputRef.current) {
    this.step3InputRef.current.focus();
  }
});

辅助优化建议 #

• 移除或调整Keyboard.dismiss()：因为切换步骤后聚焦新输入框会自动弹出键盘，不需要手动收起之前的键盘，建议把Keyboard.dismiss()去掉，避免干扰后续聚焦。
• 给步骤组件添加唯一key：如果还是想使用autoFocus，可以给每个步骤的外层容器添加唯一的key，让React每次切换step时都重新挂载对应的组件，这样autoFocus会重新触发：

case 1: step = <View key="step-1">{this.displayStep1()}</View>; break; 
case 2: step = <View key="step-2">{this.displayStep2()}</View>; break; 
case 3: step = <View key="step-3">{this.displayStep3()}</View>; break; 

总结 #

手动使用ref聚焦是解决这个问题最可靠的方案，能精准控制聚焦时机，避免组件复用和异步更新带来的问题。你可以先试试这个方法，应该能解决后续步骤自动聚焦失效的问题。

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