Question

该代码在Web浏览器上可以正常工作，但是在ipad或iphone上，每当我在文本输入中输入字符时，键盘都会自动退出。但是，当我在屏幕上而不是标题上使用具有相同设置的此文本输入时，在我单击键盘之外之前，无需关闭自身，效果就很好。

这是搜索标题的代码。该组件是搜索标签的标题

import React, {Component} from 'react';
import { View, Text, Image, TextInput, TouchableOpacity } from 'react-native';
import {search} from './SearchFunctionality.js'

export default class SearchHeader extends Component {
   constructor(props){
       super(props)
       this.state={
           value: ''
       }      
   }

submitButtonHandler = () => {
    search(this.state.value)
}

render(){
     return (
    <View style={{flexDirection: 'row', alignItems: 'center', justifyContent: 'center'}}>
    <Image
    style={{ width: 50, height: 50 }}
    source={{uri: 'https://vignette.wikia.nocookie.net/youtube/images/a/a5/Kittisaurus.jpeg/revision/latest/zoom-crop/width/360/height/360?cb=20200102062324'}}
    />
    <TextInput type = "search" name = 'SearchBar' onChangeText= {(searchValue) => this.setState({value:searchValue})}
      placeholder = 'SEARCH'
      style={{ paddingLeft: 5, paddingRight: 5, width: 150, height: 40, borderColor: 'green', borderWidth: 3 }}
    />
    <TouchableOpacity style = {{height: 40, width: 70, justifyContent: 'center',  alignItems: "center", backgroundColor: 'green'}} onPress = {this.submitButtonHandler}>
        <Text>find</Text>
    </TouchableOpacity>
    </View>

  );}
}

Answer 1

我不认为TextInput是从状态获取值并覆盖其自身的值。尝试为TextInput分配this.state.value的值：

<TextInput 
type="search" 
name='SearchBar'
value={this.state.value}
onChangeText= {(searchValue) => this.setState({value:searchValue})}
placeholder = 'SEARCH'
style={{ paddingLeft: 5, paddingRight: 5, width: 150, height: 40, borderColor: 'green', borderWidth: 3 }}
    />

反应本机-标头中的TextInput-每次输入新字符时键盘始终关闭

1 个答案: