Я хочу обработать Edit/update действие для моего модального значения моего блога.
Все действия ADD, EDIT, DELETE теперь работают
Только при каждом редактировании возникает проблема. Я получаю те же данные блога 0-го массива
любые предложения по этому вопросу. Как я могу обработать это и открыть модал с соответствующим только его идентификатором?
Спасибо
// Блог. js
<Grid style={{padding: 0}} id="todo">
{activeBlogs.map((item, index) => (
<Cell key={item._id} data-id={item._id}>
<Card shadow={5} className="cards-grid">
{item.blog_image_link ?
(<CardTitle style={{color: '#fff', height: '200px',
width: 'auto', backgroundImage: `url(${item.blog_image_link})`, backgroundPosition: 'center',
backgroundSize: 'cover',
backgroundRepeat: 'no-repeat'}}></CardTitle>) :
(<CardTitle className="card-title-image"></CardTitle>
)
}
<CardText>
<b>{item.blog_short_desc}</b>
</CardText>
<CardActions border>
<p>
<Button className="blog-read-me-button col-4" onClick={this.handleOpenDialog.bind(this, item._id)}>Read </Button>
{ isAuthenticated && (item.blog_by === user._id) ?
<span className="col=8">
<Button className="remove-btn-blog-post"
color="danger"
size="sm"
onClick= {this.onDeleteBlogClick.bind(this, item._id)} title="Delete Blog">
×
</Button>
<EditBlog onClick={() => this.replaceModalItem(this, item._id)} />
</span> : null }
</p>
<p style={{ fontStyle:'italic', fontWeight:'bold'}}>By-{item.blog_by_author} <span style={{float:'right',}}>{Moment(item.date).format('Do MMMM YYYY')}</span></p>
</CardActions>
</Card>
</Cell>
))}
</Grid>
// Редактировать. js (дочерний компонент)
class EditBlog extends Component {
constructor(props) {
super(props);
this.state = {
modal: false,
requiredItem : null,
_id: '',
blog_short_desc: '',
blog_name: '',
blog_desc: '',
blog_image_link: '',
blog_by: '',
blog_by_author: ''
};
this.replaceModalItem = this.replaceModalItem.bind(this);
this.onTodoChange = this.onTodoChange.bind(this);
}
static propTypes = {
auth: PropTypes.object.isRequired,
updateBlog: PropTypes.func.isRequired,
editBlog: PropTypes.func.isRequired,
resume: PropTypes.object.isRequired,
}
UNSAFE_componentWillReceiveProps(nextProps) {
this.setState({
value: nextProps.name
})
}
toggle = (id) => {
this.setState({
modal: !this.state.modal
});
}
componentWillMount() {
this.props.resume["blogs"].map((blog) => {
this.setState({
updatable : false,
_id: blog._id,
blog_short_desc: blog.blog_short_desc,
blog_name: blog.blog_name,
blog_desc: blog.blog_desc,
blog_image_link: blog.blog_image_link,
blog_by: blog.blog_by,
blog_by_author: blog.blog_by_author
});
})
debugger
}
// replaceModalItem(id) {
// debugger
// this.setState({
// requiredItem : id
// })
// }
replaceModalItem(id) {
this.setState({
openDialog: true,
OpenEditDialog: true,
requiredItem: id
});
}
// titleHandler(e) {
// this.setState({ [e.target.name] : e.target.value });
// }
onTodoChange = (e) => {
this.setState({
[e.target.name] : e.target.value
});
}
onSubmit = (e, id) => {
e.preventDefault();
const updatedBlog = {
blog_short_desc: this.state.blog_short_desc,
blog_name: this.state.blog_name,
blog_desc: this.state.blog_desc,
blog_image_link: this.state.blog_image_link,
blog_by: this.props.auth["user"]._id,
blog_by_author: this.props.auth["user"].name
}
//update blog via updateblog action
this.props.updateBlog(id, updatedBlog, this.props.history);
alert("Blog updated successfully!");
debugger
//close modal
e.target.reset();
this.toggle();
}
render(){
return(
<span>
<a className="btn edit-btn-blog-post" href="#" onClick={this.toggle} title="Edit Blog">
<i className="fa fa-pencil" aria-hidden="true"></i>
</a>
<Modal
isOpen = {this.state.modal}
toggle = {this.toggle}
></Modal>
<Modal
isOpen = {this.state.modal}
toggle = {this.toggle}
>
<ModalHeader toggle={this.toggle} style={{fontWeight: "bold"}}>
Edit your blog {this.state.blog_name}
</ModalHeader>
<ModalBody>
<Form onSubmit={e => this.onSubmit(e, this.state._id, )}>
<FormGroup>
<Label for="blogHeading">Blog Heading</Label>
<Input type="text" name="blog_short_desc" id="blogHeading" placeholder="Update one liner"
onChange={this.onTodoChange} value={this.state.blog_short_desc}/>
<Label for="blogName">Blog Name</Label>
<Input type="text" name="blog_name" id="blogName" placeholder="Update blog name"
onChange={this.onTodoChange} value={this.state.blog_name}/>
<Label for="desc1">Description </Label>
<Input type="textarea" name="blog_desc" id="desc1" placeholder="Update your blog"
onChange={this.onTodoChange} value={this.state.blog_desc}/>
<Label for="imageUrl">Image Url</Label>
<Input type="text" name="blog_image_link" id="imageUrl" placeholder="Update image url (Optional)"
onChange={this.onTodoChange} value={this.state.blog_image_link}/>
<Button
color="dark"
style={{marginTop: '2rem'}}
block
>Edit blog</Button>
</FormGroup>
</Form>
</ModalBody>
</Modal>
</span>
)
}
}
const mapStateToProps = state => ({
resume: state.resume,
auth: state.auth
})
export default connect(mapStateToProps, { updateBlog })(EditBlog);
// Пользовательский интерфейс блога
