React Native iOS模拟器密码输入框冻结及事件冒泡问题求助

针对你遇到的InputField子组件在iOS模拟器中密码/确认密码框冻结、输入密码触发确认密码onChange的问题，结合secureTextEntry属性的常见坑，给出以下具体解决步骤：

1. 给每个InputField实例添加唯一key #

React Native会复用无唯一key的重复组件，导致secureTextEntry状态串扰、组件实例混乱。调用子组件时必须指定唯一key：

// Signup.tsx
<InputField 
  key="signup-password"
  secureTextEntry={true}
  onChange={(text) => setPassword(text)}
  placeholder="请输入密码"
/>
<InputField 
  key="signup-confirm-password"
  secureTextEntry={true}
  onChange={(text) => setConfirmPassword(text)}
  placeholder="请确认密码"
/>

2. 确保子组件状态独立，避免内部复用secureTextEntry状态 #

如果InputField内部用useState维护secureTextEntry状态，会导致所有实例共享状态逻辑，引发串扰。直接使用父组件传入的props，或把切换状态提升到父组件：

错误示例（子组件内部维护状态）： #

// InputField.tsx 错误写法
const [isSecure, setIsSecure] = useState(props.secureTextEntry);

正确写法： #

// InputField.tsx 直接使用props
const isSecure = props.secureTextEntry;

// 若需切换密码显示，由父组件传递状态和回调
const InputField = ({ secureTextEntry, onToggleSecure, ...rest }) => {
  return (
    <View>
      <TextInput
        secureTextEntry={secureTextEntry}
        {...rest}
      />
      <TouchableOpacity onPress={onToggleSecure}>
        <Text>{secureTextEntry ? '显示' : '隐藏'}</Text>
      </TouchableOpacity>
    </View>
  );
};

// Signup.tsx 调用
const [passwordIsSecure, setPasswordIsSecure] = useState(true);
const [confirmIsSecure, setConfirmIsSecure] = useState(true);

<InputField 
  key="password"
  secureTextEntry={passwordIsSecure}
  onToggleSecure={() => setPasswordIsSecure(!passwordIsSecure)}
  onChange={setPassword}
/>
<InputField 
  key="confirm-password"
  secureTextEntry={confirmIsSecure}
  onToggleSecure={() => setConfirmIsSecure(!confirmIsSecure)}
  onChange={setConfirmPassword}
/>

3. 修复事件回调绑定错误 #

输入密码触发确认密码框的onChange，大概率是回调函数绑定错误：

• 确保每个InputField的onChange绑定的是独立的状态setter，不要复用同一个setter
• 子组件中使用onChangeText而非原生onChange传递输入内容，避免事件冒泡混乱：

// InputField.tsx 正确传递回调
<TextInput
  onChangeText={props.onChange} // 用onChangeText直接传文本，而非事件对象
  secureTextEntry={props.secureTextEntry}
  {...props}
/>

4. iOS端secureTextEntry特殊优化 #

给密码输入框添加textContentType属性，明确输入类型，解决iOS焦点卡顿问题：

<TextInput
  secureTextEntry={true}
  textContentType="password" // 密码框用这个
  // 确认密码框用newPassword
  textContentType="newPassword"
  autoCapitalize="none"
  autoCorrect={false}
/>

5. 排查React Native版本问题 #

如果是RN 0.70以下版本，secureTextEntry存在已知的焦点冻结bug，建议升级到0.72+稳定版本，或查看官方issue的临时补丁方案。

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