Javascript 单击时对axios编辑文本作出反应

我对前端开发非常陌生，我正在尝试创建一个简单的应用程序，其中包含链接到每个帖子的帖子和评论。单击相应的编辑按钮时，如何允许编辑（即显示已创建帖子的文本字段）？我不知道我在这些编辑代码中做了什么

const Post=({
张贴，
内容,，
作者，
作者姓名，
时间戳，
编辑，
评论，
用户ID，
用户角色，
获取所有帖子
}) => {
const classes=useStyles（）；
const token=JSON.parse（localStorage.getItem（'token'）；
const[commentContent，setCommentContent]=useState（“”）；
常量[editedPostContent，setEditedPostContent]=useState（“”）；
const handleCreateComment=async（）=>{
试一试{
const response=wait axios.post（后端+“/post/comment/”+postId{
commentMsg:commentContent
}, {
标题：{
'Authorization'：'Bearer${token}`
}
});
const{message}=response.data；
如果（信息）{
控制台日志（消息）；
设置内容（“”）；
getAllPosts（）；
}否则{
log（“CreateComment错误”）；
} 
}捕获（e）{
log（“create comment:（”）有一些错误；
}
};
const onTextFiledPressEnter=（e）=>{
如果（如keyCode===13）{
handleCreateComment（）；
}
};
const handleEditPost=async（）=>{
试一试{
const response=wait axios.patch（后端+“/post”{
posted:posted，
消息：editedPostContent
},{
标题：{
'Authorization'：'Bearer${token}`
}
});
const{message}=response.data；
如果（信息）{
控制台日志（消息）；
setEditedPostContent（“hello edited post”）；
getAllPosts（）；
}否则{
日志（“编辑后错误”）；
}
}捕获（e）{
log（“编辑帖子有问题”）；
}
};
const handleDeletePost=async（）=>{
试一试{
const response=wait axios.delete（后端+“/post/”+postId{
标题：{
'Authorization'：'Bearer${token}`
}
});
const{message}=response.data；
如果（信息）{
控制台日志（消息）；
getAllPosts（）；
}否则{
console.log（“DeletePost错误”）；
} 
}捕获（e）{
log（“delete post:（”）有问题；
}
};
返回(
{authorName}
{时间戳}
{（userRole==ROLE.ADMIN | | userId==authorId）&&
handleEditPost（）
}
/>
handleDeletePost（）
}
/>
}
{content}
{i编辑&&
编辑
}
{comments.map（（comment）=>(
))}
setCommentContent（e.target.value）}
onKeyDown={onTextFiledPressEnter}
/>
);
}；

接受postId作为handleEditPost函数的输入参数。类似于：

const handleEditPost = async (postId) => {
....
}

然后在jsx中调用handleEditPost：

  <EditIcon 
              className={classes.icon}
              onClick={() =>
                handleEditPost(post.id)
              }
  />

handleEditPost（post.id）
}
/>