React Native自定义Theme组件下输入框输入失焦问题求助

看起来你遇到的核心问题出在Theme组件的渲染逻辑和状态更新的方式上，我来一步步帮你修复：

问题1：Theme组件的render方法缺少return，且组件名不规范 #

你的Theme组件render函数里直接写了<Header/>、<View>等元素，但没有用return包裹——这会导致React无法正确识别要渲染的内容，每次父组件（ChangePassword）状态更新时，Theme组件的渲染结果异常，进而导致它的子元素（包括你的Input）被重新挂载（而非正常重渲染），这就是输入框每次输入就失焦的根本原因。

另外，React自定义组件名必须大写，你的footer应该改成Footer（对应import的组件名）。

修复后的Theme组件代码： #

import Header from './header'
import Footer from './footer' // 组件名改为大写
export default class Theme extends Component {
  render() {
    // 用return包裹所有要渲染的JSX内容
    return (
      <>
        <Header/>
        <View>
          {this.props.children}
        </View>
        <Footer/> {/* 这里也同步改为大写 */}
      </>
    )
  }
}

问题2：直接修改state引用，导致状态更新异常 #

你的setValues方法里直接修改了从state中取出的inputs对象属性：

let { inputs } = this.state;
inputs[key]["value"] = value; // 直接修改state的引用，违反React状态不可变性原则

React依赖状态的不可变性判断是否需要重渲染，直接修改原对象会导致状态更新逻辑异常，间接引发组件不必要的重渲染或挂载。

修复后的setValues方法： #

setValues = (key, value) => {
  // 使用函数式setState，基于前状态创建新对象，保证不可变性
  this.setState(prevState => ({
    inputs: {
      ...prevState.inputs,
      [key]: {
        ...prevState.inputs[key],
        value: value,
        errorMessage: ""
      }
    }
  }));
}

这里不需要async/await，因为setState本身是异步操作，函数式写法还能避免状态更新的竞态问题。

额外优化：替换旧版字符串ref #

你当前用的ref="Current_password"是React旧版字符串ref语法，推荐使用createRef：

// 在ChangePassword组件的constructor中创建ref
constructor(props) {
  super(props);
  this.state = {
    inputs:{
      old_password : {value:null, errorMesssage:""}
    }
  }
  this.currentPasswordRef = React.createRef(); // 添加这一行
}

// 在Input组件中使用
<Input
  ref={this.currentPasswordRef}
  // ...其他属性
/>

做完这些修改后，你的输入框应该就能正常输入，不会再出现失焦和键盘收起的问题了。

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