ToDo編集ページをつくる
resources/assets/js/components/Edit.js を作る
// Edit.js import React, {Component} from 'react'; import axios from 'axios'; import { Link } from 'react-router'; class Edit extends Component { constructor(props) { super(props); this.state = {title: '', description: ''}; } componentDidMount(){ axios.get("http://localhost:8000/api/todos/" + this.props.params.id) .then(response => { this.setState({ title: response.data.title, description: response.data.description }); }) .catch(function (error) { console.log(error); }) } handleChangeTitle(e){ this.setState({ title: e.target.value }) } handleChangeDesc(e){ this.setState({ description: e.target.value }) } handleSubmit(event) { event.preventDefault(); const products = { title: this.state.title, description: this.state.description } let uri = 'http://localhost:8000/api/todos/' + this.props.params.id axios.patch(uri, products).then((response) => { this.props.history.push('/list'); }); } render(){ return ( <div> <h1>Edit ToDo</h1> <div className="row"> <div className="col-md-10"></div> <div className="col-md-2"> <Link to="/list"><< Back to List</Link> </div> </div> <form onSubmit={this.handleSubmit.bind(this)}> <div className="form-group"> <label>Title</label> <input type="text" className="form-control" value={this.state.title} onChange={this.handleChangeTitle.bind(this)} /> </div> <div className="form-group"> <label name="product_price">Item Price</label> <input type="text" className="form-control" value={this.state.description} onChange={this.handleChangeDesc.bind(this)} /> </div> <div className="form-group"> <button className="btn btn-primary">Update</button> </div> </form> </div> ) } } export default Edit;
resources/assets/js/app.js にルートを追加
// app.js import List from './components/List'; + import Edit from './components/Edit'; ~~~ <Route path="/list" component={List} /> + <Route path="/todos/:id/edit" component={Edit} />
resources/assets/js/components/TableRow.js
// TableRow.js import React, { Component } from 'react'; + import { Link } from 'react-router'; ~~~~ - <button className="btn btn-primary">Edit</button> + <Link to={"/todos/"+this.props.obj.id + "/edit"} className="btn btn-primary">Edit</Link>
ToDoを削除する
resources/assets/js/components/TableRow.js のDeleteボタンに処理を追加する
// TableRow.js import React, { Component } from 'react'; import { Link, browserHistory } from 'react-router'; class TableRow extends Component { constructor(props) { super(props); } handleSubmitDeletion(event) { event.preventDefault(); let uri = "http://localhost:8000/api/todos/" + this.props.obj.id axios.delete(uri); browserHistory.push('/'); } render() { return ( <tr> <td> {this.props.obj.id} </td> <td> {this.props.obj.title} </td> <td> {this.props.obj.description} </td> <td> <Link to={"/todos/"+this.props.obj.id + "/edit"} className="btn btn-primary">Edit</Link> </td> <td> <form onSubmit={this.handleSubmitDeletion.bind(this)}> <input type="submit" value="Delete" className="btn btn-danger"/> </form> </td> </tr> ) } } export default TableRow;
これで削除ボタン押下でToDoの削除処理が行われる。
React編:
(その1)http://www.hakopako.net/entry/2018/01/17/220538
(その2)http://www.hakopako.net/entry/2018/01/17/220620
(その3)http://www.hakopako.net/entry/2018/01/17/220707
(その4)http://www.hakopako.net/entry/2018/01/17/220730