React Native中TextInput输入一次后无法连续输入问题

问题分析 #

你遇到的输入一个字符就键盘收起的问题，大概率是以下几个原因导致：

• 属性拼写错误：代码里的defaultvalue是小写v，React Native TextInput的正确属性是defaultValue（驼峰式），拼写错误会导致组件无法正确绑定初始值，引发异常渲染。
• 组件频繁重渲染：如果这个TextInput所在的父组件在每次输入时都会重新渲染，会导致TextInput被卸载后重新挂载，键盘随之收起。
• 表单库逻辑异常：使用react-hook-form时，若handleChange或setFieldTouched触发了不必要的组件更新，也会出现这个问题。

解决方案 #

1. 修正属性拼写错误

先把defaultvalue改成defaultValue，这是最常见的触发原因：

<TextInput
    style={styles.input}
    defaultValue={values.firstname} // 修正为大写V
    placeholder="Enter First Name"
    onChangeText={handleChange('firstname')}
    onBlur={() => setFieldTouched('firstname')}
/>
{(errors.firstname && touched.firstname) && (
    <Text style={styles.errors}>{errors.firstname}</Text>
)}

2. 避免组件不必要重渲染

如果修正拼写后问题依旧，检查父组件是否存在过度渲染：

• 用React.memo包裹当前包含TextInput的组件，避免无意义的重渲染：

import { memo } from 'react';

const YourComponent = memo(() => {
  // 你的组件代码
  return (
    // ...包含TextInput的JSX
  );
});

export default YourComponent;

• 确保父组件的state更新不会触发当前组件的重新渲染，比如避免把父组件的非必要state作为props传递，或者用useMemo/useCallback处理传递的函数和数据。

3. 检查react-hook-form的使用

确认你是否正确初始化了表单，避免每次渲染都生成新的表单实例：

import { useForm } from 'react-hook-form';

const YourComponent = () => {
  // 确保useForm在组件顶层调用，不要嵌套在条件判断里
  const { register, handleSubmit, errors, touched, values, handleChange, setFieldTouched } = useForm();
  
  // ...其他代码
};

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