在用户提交后，对嵌套文本框中的本机清除内容作出反应

Question

我正在开发一个react原生应用程序，它为用户提供新闻提要。Againist每个新闻提要的用户都可以选择在每个新闻提要附带的文本框中进行评论。我可以正确提交它，但问题是，在提交后，文本仍然保留在文本框中，而且当用户开始在一个文本框中键入时，订阅源的所有提交按钮都会激活，但它应该只在当前订阅源中激活，这样它的文本框就会在中键入

集装箱

commentPost = async (item) => {
const togglePostCommentLoader = (item, loaderStatus) => this.state.posts.map(post => post.id === item.id ? {...post, commentPostLoader: loaderStatus } : post);
const { userId, communityId, groupId, comment, posts: oldPosts } = this.state;
try {
this.setState( { posts: togglePostCommentLoader(item, true) });
const data = await API.commentPost(communityId, groupId, userId, item.id, comment);
this.setState({
posts: togglePostCommentLoader(item, false),
comment: ''
});
}catch(error){
}
this.callAfterCommentSnackBar();
}
render() {
const {posts, modalVisible, showLoader, showArchiveSnackBar, showAfterCommentSnackBar, commentPostLoader, groupId, communityId, userId} = this.state;
return (
<GroupPostsScreen
posts = {posts}
navigation = {this.props.navigation}
visible = {modalVisible}
showLoader = {showLoader}
showArchiveSnackBar = {showArchiveSnackBar}
showAfterCommentSnackBar = {showAfterCommentSnackBar}
onCallArchiveSnackBar = {this.callArchiveSnackBar}
onCommentPost = {this.commentPost}
commentPostLoader = {commentPostLoader}
onSetComment = {this.setComment}
commentValue = {this.state.comment}
userId = {userId}
/>
);
}

TEXBOX函数设置状态(也在容器中(

setComment= (comment) => {
this.setState({ comment: comment })
}

查看屏幕

<ScrollView >
{
posts.map((item, i) => {
const isEnabled = commentValue[i] &&  commentValue[i].length > 0;
return (
<View key={i} style={styles.user}>
<Card
containerStyle={{borderRadius:7}}
>
<ListItem
onPress={()=>(navigation.navigate('PostComments',{'postId':item.id, 
'communityId': communityId,
'communityMemberId': userId,
'groupId':groupId, 
'post':item.text}))}
chevron={{ color: '#36a' }}
bottomDivider = {true}
title={item.headline}
titleStyle={{color: '#36c', fontWeight:'500'}}
/>
<Text style={{marginBottom: 10, fontSize:16, color:'#778899'}}>
{item.text}
</Text>
<TextInput
onChangeText={onSetComment} 
label='Write Comment'
underlineColor="#36a"
// value={commentValue}
style={{backgroundColor:'#fff', width:'90%'}}
/>
<View style={{alignSelf:"flex-end", position:'relative', right:0,top:-20}}>
<Icon
disabled={!isEnabled}
iconStyle={[(isEnabled=== true) ? styles.likedColor : styles.unLikedColor]}
name='md-arrow-round-forward'
type='ionicon'
color='#999'
onPress={() => {onCommentPost(item)}}
/>

<View style={styles.loading}>
<ActivityIndicator 
animating={item.commentPostLoader===true}
size="small"
/>
</View>
</View>

</Card>
</View>
);
})
}

</ScrollView>

Answer 1

1(在VIEW SCREEN内取消注释// value={commentValue}

2( 确保CONTAINER中的commentPost不会抛出错误

新的建议解决方案：

集装箱

commentPost = async(item) => {
const togglePostCommentLoader = (item, loaderStatus) => this.state.posts.map(post => post.id === item.id ? { ...post,
commentPostLoader: loaderStatus
} : post);
const {
userId,
communityId,
groupId,
comments,
posts: oldPosts
} = this.state;
try {
this.setState({
posts: togglePostCommentLoader(item, true)
});
const data = await API.commentPost(communityId, groupId, userId, item.id, comment);
this.setState({
posts: togglePostCommentLoader(item, false),
comments: {...comments, [item.id]: '' }
});
} catch (error) {}
this.callAfterCommentSnackBar();
}
render() {
const {
posts,
modalVisible,
showLoader,
showArchiveSnackBar,
showAfterCommentSnackBar,
commentPostLoader,
groupId,
communityId,
userId
} = this.state;
return (
<
GroupPostsScreen posts = {
posts
}
navigation = {
this.props.navigation
}
visible = {
modalVisible
}
showLoader = {
showLoader
}
showArchiveSnackBar = {
showArchiveSnackBar
}
showAfterCommentSnackBar = {
showAfterCommentSnackBar
}
onCallArchiveSnackBar = {
this.callArchiveSnackBar
}
onCommentPost = {
this.commentPost
}
commentPostLoader = {
commentPostLoader
}
onSetComment = {
this.setComment
}
commentValues = {
this.state.comments
}
userId = {
userId
}
/>
);
}

TEXBOX函数设置状态(也在容器中(

setComment= (postId) => (comment) => {
this.setState({
comments: {
...this.state.comments,
[postId]: comment
}
})
}

查看屏幕

<ScrollView >
{
posts.map((item, i) => {
const isEnabled = commentValue[i] &&  commentValue[i].length > 0;
return (
<View key={i} style={styles.user}>
<Card
containerStyle={{borderRadius:7}}
>
<ListItem
onPress={()=>(navigation.navigate('PostComments',{'postId':item.id, 
'communityId': communityId,
'communityMemberId': userId,
'groupId':groupId, 
'post':item.text}))}
chevron={{ color: '#36a' }}
bottomDivider = {true}
title={item.headline}
titleStyle={{color: '#36c', fontWeight:'500'}}
/>
<Text style={{marginBottom: 10, fontSize:16, color:'#778899'}}>
{item.text}
</Text>
<TextInput
onChangeText={onSetComment(item.id)} 
label='Write Comment'
underlineColor="#36a"
value={commentValues[item.id]}
style={{backgroundColor:'#fff', width:'90%'}}
/>
<View style={{alignSelf:"flex-end", position:'relative', right:0,top:-20}}>
<Icon
disabled={!isEnabled}
iconStyle={[(isEnabled=== true) ? styles.likedColor : styles.unLikedColor]}
name='md-arrow-round-forward'
type='ionicon'
color='#999'
onPress={() => {onCommentPost(item)}}
/>
<View style={styles.loading}>
<ActivityIndicator 
animating={item.commentPostLoader===true}
size="small"
/>
</View>
</View>
</Card>
</View>
);
})
}
</ScrollView>