我正在制作社交媒体应用。我正在遍历所有评论并在UI上显示它。当我点击编辑时,总是最后一个评论的文字显示在输入上。我尝试了许多不同的东西,改变了结构,使用bind来绑定上下文,但没有任何帮助。
我正在使用React Material UI。
这是代码:
render() {
const { anchorEl } = this.state;
const open = Boolean(anchorEl);
return(
<Panel>
<form noValidate autoComplete="off" onSubmit={this.onSubmit}>
<TextField
id={`comment${this.state.post_id}`}
name="comment"
fullWidth
placeholder="Comment here"
margin="normal"
value={this.state.comment}
onChange={this.handleChange}
InputProps={{
endAdornment : <InputAdornment position="end">
<IconButton onClick={this.resetTextField}>
<CloseIcon/>
</IconButton>
</InputAdornment>
}}
/>
</form>
{this.props.comments && this.props.comments.length > 0 &&
<RenderComments
comments={this.state.comments}
open={open}
anchorEl={this.state.anchorEl}
handleClick={this.handleClick}
handleClose={this.handleClose}
handleDelete={this.handleDelete}
handleEdit={this.handleEdit}
/>
}
</Panel>
)
}
const RenderComments = (props) => {
return props.comments.map(comment =>
<CommentBase
key={comment.id}
comment={comment}
open={props.open}
anchorEl={props.anchorEl}
handleClick={props.handleClick}
handleClose={props.handleClose}
handleDelete={props.handleDelete}
handleEdit={props.handleEdit}
/>
);
};
const CommentBase = ({comment, open, anchorEl, handleClick, handleClose, handleDelete, handleEdit}) => (
<CommentBasePanel>
<CommentText>
{comment.text}
<span style={{ float: 'right', fontSize: 10, color: '#A9A9A9' }}>{moment(comment.created_at).fromNow()}</span>
</CommentText>
<HelperAction>
<MoreVertIcon
id={comment.id}
aria-owns={open ? `simple-popper${comment.id}` : null}
aria-haspopup="true"
variant="contained"
onClick={handleClick}
/>
<Popover
id={`simple-popper${comment.id}`}
open={open}
anchorEl={anchorEl}
onClose={handleClose}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'right',
}}
transformOrigin={{
vertical: 'top',
horizontal: 'right',
}}
>
<Typography style={{ padding: 10, cursor: 'pointer' }} onClick={() => handleEdit(comment)}>
Edit
</Typography>
<Typography style={{ padding: 10, color: red[500], cursor: 'pointer' }} onClick={() => handleDelete(comment.id)}>
Delete
</Typography>
</Popover>
</HelperAction>
</CommentBasePanel>
);
handleEdit = (comment) => {
this.setState({ comment: comment.text, comment_id: comment.id })
};
无论我编辑什么注释,handleEdit方法中的控制台登录注释总是记录最后的注释。如图所示,第一条评论上的编辑会显示最后一条评论文本。
如果您按如下所示更新RenderComments
渲染方法,它应该可以解决您的问题:
const RenderComments = (props) => {
return props.comments.map(comment =>
<CommentBase
key={comment.id}
comment={comment}
open={props.open}
anchorEl={props.anchorEl}
handleClick={ props.handleClick }
handleClose={ props.handleClose }
handleDelete={ () => props.handleDelete(comment.id) }
handleEdit={ () => props.handleEdit(comment) }
/>
);
};
Bad Popovers管理
map
将相同的open
和anchorEl
道具复制到所有Popover实例 - handleClick
(你没有显示这个)*在同一个地方打开所有这些**(最后一个在顶部)。
FIX:在id
中包含handleClick
,保存状态并在open
属性条件下使用
FIX2:您可以使用一个<Popover/>
实例,尤其是在不显示与特定注释相关的任何内容时。
PS。我花了更多的时间在stackblitz中重新创建这个(猜测丢失的部分)而不是真正的调试(实际上只用<Popover/>
来检查{comment.id}
的html结构)。下次显示更完整的代码或提供最小的工作示例。