Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
125 lines (118 sloc) 3.63 KB
<h1>Task2 - edit</h1>
<hr />
<div id="app"></div>
<!-- -->
<script type="text/babel">
class Edit extends React.Component {
constructor(props) {
super(props);
this.state = {
title: '',
content: '',
complete : 0,
}
this.id = props.id
}
handleChange = event => {
const { name, value } = event.target
this.setState({
[name]: value
})
}
componentDidMount(){
axios.get('/api_todos/show/'+this.id ).then(response => {
var data = response.data.docs[0]
this.setState({ title: data.title })
this.setState({ content: data.content })
this.setState({ complete: data.complete })
console.log( this.state )
})
.catch(function (error) {
console.log(error)
})
}
set_complete(value){
// console.log("#test1")
console.log(value)
this.setState({ complete: value })
console.log(this.state.complete)
this.update_proc(value)
// var d = document.getElementById("content").getAttribute("value");
// console.log(d)
}
update_proc(complete){
const task = {
id: this.id,
title: this.state.title,
content: this.state.content,
complete : complete,
}
console.log(task )
let uri = '/api_todos/update/'
axios.post(uri, task ).then((response) => {
console.log(response.data )
console.log("success")
window.location.href="/todos"
})
}
delete_proc(){
axios.get('/api_todos/delete/'+this.id ).then(res => {
console.log( res.data )
window.location.href="/todos"
})
}
dispComplete(){
// var ret =""
if(this.state.complete == 0){
return(
<div>
<a href='#' onClick={this.set_complete.bind(this, 1)}>[ complete ]</a>
<br />
<br />
</div>
)
}else{
return ("")
}
}
render(){
// console.log( this.state )
const { title, content } = this.state;
return (
<div>
<div className="row">
<div className="col-md-6">
<div className="form-group">
<label>Title:</label>
<input type="text" className="form-control" name="title"
value={this.state.title}
onChange={this.handleChange} />
</div>
</div>
</div>
<div className="row">
<div className="col-md-6">
<div className="form-group">
<label>content:</label>
<textarea className="form-control" id="content" rows="10"
name="content"
value={this.state.content}
onChange={this.handleChange}
>
</textarea>
</div>
</div>
</div><br />
<hr />
<a className="btn btn-primary" href='#'
onClick={this.update_proc.bind(this, this.state.complete )}>Save</a>
<hr />
{this.dispComplete()}
<a className="btn btn-primary" href='#'
onClick={this.delete_proc.bind(this )}>Delete</a>
</div>
)
}
}
ReactDOM.render(<Edit id="<%= params_id %>" />, document.getElementById('app'));
</script>
You can’t perform that action at this time.