我的 React 本机项目中有一个 TextInput。我使用 onCHangeText={(text)=>handleChange('postText', text)} 函数来更新我在函数开头设置为状态对象的 formData。我得到的结果是每当我输入时，应用程序都会重新启动并刷新，删除以前的内容并仅将最新的字符写入文本字段。更糟糕的是，它完全隐藏了键盘。
这是我的代码：
const HomePageBuilder = ({navigation}) =>{
const [postingMedia, setPostingMedia] = useState(null);
const [selectedValue, setSelectedValue] = useState(null);
const [images, setImages] = useState([]);
const screenWidth = Dimensions.get('window').width;
const {userId, login, logout, user} = useContext(AppContext);
const [postData, setPostData] = useState({postMedia : '',
postText : '', postType : 'General'
});
const handleChange = (fieldName, value)=>{
setFormData(prevState =>({
...prevState,
[fieldName]:value
}));
}
return(<>
<Header />
<SafeAreaView style = {HomeStyles.container}>
<View style = {HomeStyles.bodyMain}>
<>
<FlatList
data = {posts}
renderItem={postBuilder}
keyExtractor={(item, index) => index.toString()}
style ={{marginBottom: 20, paddingBottom: 20}}
ListHeaderComponent={()=>(
<View style = {HomeStyles.postMakerDiv}>
<View>
<TextInput placeholder="Share some news" style = {HomeStyles.postBoxMain}
ref = {postInputRef}
// onChangeText={(text) => handleChange('postText', text)}
value = {postData.postText}
onEndEditing={(text) => setPostText(text)}
/>
</View>
<View style = {HomeStyles.imageBox}>
{images.length > 0 && (
<>
<Pressable style = {{zIndex: 1}} onPress = {()=>{
setImages([]);
}}>
<Image source = {require("../../views/resources/close-circle.png")} style = {{width: 25, height: 25, left: '96%', top: 15, zIndex: 1}}/>
</Pressable>
<ScrollView horizontal style={{ marginTop: 20, height: 320}} contentContainerStyle = {HomeStyles.picturesPreview}>
{images.map((imageUri, index) => (
<View key={index} style={{ margin: 5 }}>
<Image
source={{ uri: imageUri }}
style={{ minWidth: screenWidth * 0.9, maxWidth: screenWidth * 0.9, height: 300, borderRadius: 10 }}
/>
</View>
))}
</ScrollView>
</>
)}
</View>
<View style = {HomeStyles.imageBox}>
{
videoUri ?(
<>
<Pressable onPress = {()=>{
setVideoUri(null);
}} style = {{width: 30, height: 30, flexDirection: 'row', alignSelf: 'flex-end'}}>
<Image source = {require("../../views/resources/close-circle.png")} style = {{width: 25, height: 25, zIndex: 1, top: 10}}/>
</Pressable>
<TouchableOpacity onPress = {togglePlayback}>
<Video
source = {{uri: videoUri}}
resizeMode = "cover"
style = {{width: '100%', height: 400, borderWidth: 1, borderRadius: 30}}
ref = {videoRef}
shouldPlay = {isPlaying}
isLooping
/>
</TouchableOpacity>
</>
):(
<>
</>
)
}
</View>
<View style = {HomeStyles.postOptions}>
<Picker
selectedValue={postData.postType}
style={{ height: 50, minWidth: 130, borderWidth: 1, borderColor: 'grey' }}
onValueChange={(text) => handleChange('postType', text)}
>
<Picker.Item label="General" value="General" />
<Picker.Item label="Business" value="Business" />
<Picker.Item label="Politics" value="Politics" />
<Picker.Item label="Lifestyle" value="Lifestyle" />
<Picker.Item label="Relationship" value="Relationship" />
<Picker.Item label="Music" value="Music" />
<Picker.Item label="Art" value="Art" />
<Picker.Item label="Entertainment" value="Entertainment" />
</Picker>
<TouchableOpacity onPress={pickImages}>
{/* Modify this to call the multiple images function later.*/}
<Icon name="camera-alt" size={25} color="purple" style = {{top: 10}}/>
</TouchableOpacity>
<TouchableOpacity onPress = {chooseVideo}>
<Icon name="videocam" size={25} color="purple" style = {{top: 10}}/>
</TouchableOpacity>
<TouchableOpacity style = {HomeStyles.postBtnMain} onPress = {makePost}>
<Text style = {{color: 'white', fontWeight: 'bold', fontSize: 15}}>
Share
</Text>
{/* <Icon name="campaign" size={25} color="white" style = {{top: -2}}/> */}
</TouchableOpacity>
</View>
</View>
)}
ListEmptyComponent={()=>(
<View style = {{justifySelf : 'center', alignSelf : 'center', justifyContent : 'center', alignContent: 'center', width: 300, marginTop: 50}}>
<Text style = {{fontSize: 20, color: 'grey', textAlign: 'center'}}>
Seems you are having some internet issues.
</Text>
<TouchableOpacity onPress = {()=> navigation.navigate("Home")} style = {{backgroundColor: 'purple', justifyContent : 'center', alignContent: 'center', padding: 10, borderRadius: 10, marginTop: 30}}>
<Text style = {{textAlign: 'center', color: 'white'}}>
Try again?
</Text>
</TouchableOpacity>
</View>
)}
/>
</>
</View>
</SafeAreaView>
</>
);
导致此问题的元素使用 styles.postBoxMain 进行样式设置
我尝试通过为它提供与 postData 对象分开的自己的状态来隔离此 TextINput。我尝试过使用 useRef.current.value 。我尝试过使用 lodash 的 debounce，这些技术似乎都不起作用。
我只需要文本输入字段正常运行并存储在 postData.postText 对象中。这是行不通的。我什至尝试过 onEndEditing。我所做的一切都反映了同样的错误。
你的 setter 被称为
setPostDatahandleOnChangesetFormDatahandleOnChangeconst handleChange = (fieldName, value)=>{
setPostData(prevState =>({
...prevState,
[fieldName]:value
}));
}