键盘在 React Native 中每次按下按键时都会消失

Question

我想在 react native 中映射键值对。值为可编辑文本条目。映射的组件显示正常，但是当我尝试编辑 TextInput 时，当我键入第一个字母时，键盘消失了。不知道是什么导致了问题。

如果我只是在父元素中放置一个 TextInput，它绝对可以正常工作，但在使用 map 函数时不起作用。

 <View style={styles.main}>
        <View>
            {this._getDetailElements()}
        </View>
 </View>

_getDetailElements(( 函数

 _getDetailElements = () => {
    return Object.keys(this.state.data).map(elem => (
        <View key={shortid.generate()} style={styles.element}>
                <TextInput
                editable={this.state.editable}
                onChangeText={text => this.setState({seletedText: text})}
                value={this.state.selectedText}
                /> 
        </View>
    )
    );
}

Answer 1

这是因为您在地图上的键每次重新渲染时都会更改。只需使用地图迭代的索引作为键

_getDetailElements = () => {
    return Object.keys(this.state.data).map((elem, index) => (
        <View key={index} style={styles.element}>
                <TextInput
                editable={this.state.editable}
                onChangeText={text => this.setState({seletedText: text})}
                value={this.state.selectedText}
                /> 
        </View>
    )
    );
}

Answer 2

我认为您应该将value更改为defaultValue 像这样：

    <TextInput
        editable={this.state.editable}
        onChangeText={text => this.setState({seletedText: text})}
        defaultValue={this.state.selectedText}
    />

祝你好运