React Native使用react-step-builder实现TextInput跨步骤状态保留

问题根因 #

react-step-builder v2.0.10 内置的handleChange方法是针对Web端原生input设计的，它依赖Web DOM事件对象读取e.target.name和e.target.value完成状态存储。React Native的TextInput没有DOM事件模型，直接绑定默认handleChange无法正确读取输入值，状态不会被存入多步骤全局状态，切换步骤后就会出现内容清空的问题。

适配实现方案 #

核心思路是绕开仅适配Web的默认handleChange，直接调用库提供的setState方法手动同步输入值到全局状态，步骤切换时状态由库统一维护，不会丢失。
具体实现代码如下：

// 先从react-native引入TextInput组件
import { TextInput, View, StyleSheet } from 'react-native';

// 多步骤单步组件内使用
const StepComponent = (props) => {
  return (
    <View>
      <TextInput
        // 注意：RN的TextInput没有默认样式，必须手动添加样式才能正常显示交互
        style={styles.input}
        // 读取全局状态值，和Web端逻辑一致
        value={props.getState('organizador', '')}
        // 关键适配：用onChangeText代替onChange，手动同步值到全局状态
        onChangeText={(inputText) => {
          props.setState('organizador', inputText)
        }}
      />
    </View>
  )
}

const styles = StyleSheet.create({
  input: {
    height: 44,
    borderWidth: 1,
    borderColor: '#e5e5e5',
    borderRadius: 6,
    paddingHorizontal: 12,
    fontSize: 16
  }
})

多输入框优化写法 #

如果表单有多个输入项，可以抽离通用处理函数减少重复代码：

const StepComponent = (props) => {
  // 通用RN输入框值同步方法
  const bindInput = (fieldKey) => (text) => {
    props.setState(fieldKey, text)
  }

  return (
    <View>
      <TextInput
        style={styles.input}
        value={props.getState('organizador', '')}
        onChangeText={bindInput('organizador')}
      />
      <TextInput
        style={styles.input}
        value={props.getState('eventName', '')}
        onChangeText={bindInput('eventName')}
      />
      {/* 其他输入框按相同格式绑定即可 */}
    </View>
  )
}

注意事项 #

• 不要手动给每个步骤组件添加随机key属性，否则切换步骤时组件会被强制重挂载，可能导致状态同步异常
• 不要修改库的unmountOnHide配置为true，否则切换步骤时非激活步骤组件会被卸载，虽然全局状态还在，但重挂载时的初始化逻辑可能引发显示异常
• 优先使用TextInput的onChangeText回调获取输入值，不要用onChange回调——后者返回的是原生事件对象，取值需要额外读取e.nativeEvent.text，写法更繁琐。

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