Laravel5.5 + React 超入門チュートリアルその４ - ToDo編集/削除

f:id:hakopako03:20180117210816p:plain

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">&lt;&lt; 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;