React Native中映射生成的TextInput输入时键盘消失问题

嘿，我来帮你拆解下这个问题的根源，然后给你针对性的解决办法～

问题核心原因 #

你遇到的键盘消失问题主要来自两个关键点：

1. 不稳定的Key值：你用shortid.generate()作为每个<View>的key，每次组件重新渲染时，这个函数都会生成全新的key。React会把key不同的组件判定为全新组件，每次setState后都会卸载旧的TextInput、重新创建新的——这就导致输入到一半，输入框被强制重建，键盘自然失去焦点消失了。
2. 共用状态的渲染冲突：所有TextInput都绑定了同一个this.state.selectedText状态，输入任何一个框的内容都会触发所有输入框重新渲染，再加上不稳定的key的影响，双重作用下键盘直接就消失了。

具体解决方案 #

我们需要从稳定key和独立状态绑定两个维度修改代码：

1. 使用数据的键作为稳定Key

把key={shortid.generate()}改成key={elem}，因为elem是你this.state.data的键，是固定不变的标识，React就能正确识别出这是同一个组件，不会反复卸载重建。

2. 给每个TextInput绑定独立状态

不要用共用的selectedText，而是直接把输入值存在this.state.data对应的键里，让每个输入框拥有自己独立的状态，更新时只会影响当前输入框。

修改后的完整代码示例：

首先确保你的state初始化符合键值对结构（根据你的实际数据调整初始值）：

state = {
  data: {
    // 这里是你的自定义键值对，比如：
    username: '',
    email: '',
    address: ''
  },
  editable: true
};

然后修改_getDetailElements函数：

_getDetailElements = () => {
  return Object.keys(this.state.data).map(elem => (
    <View key={elem} style={styles.element}>
      <TextInput 
        editable={this.state.editable} 
        onChangeText={(text) => {
          // 用函数式setState确保获取最新的state
          this.setState(prevState => ({
            data: {
              ...prevState.data,
              [elem]: text // 更新对应键的输入值
            }
          }));
        }} 
        value={this.state.data[elem]} // 绑定对应键的当前值
      />
    </View>
  ));
}

为什么这样改就解决问题了？ #

• 稳定的key让React能正确追踪每个组件的身份，状态更新时只会做组件内部的更新，不会卸载重建TextInput，键盘就能持续保持焦点。
• 每个TextInput绑定自己对应的state.data字段，输入时只会更新当前字段的值，不会触发所有输入框的不必要渲染，从根源避免了键盘丢失焦点的问题。

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