react-form-sample

index.html

<div id="body" class="" style="background-color:#282828">
  <div id="app"></div>
</div>
<footer style="">
  <div id="footer" style="text-align:center,color:#FFFFFF">
    footer 
    
  
  </div>
  
</footer>

react-form-sample.markdown

react-form-sample

A Pen by sakakendo0321 on CodePen.

License.

script.babel

class Form extends React.Component{
  constructor(props){
    super(props);
    this.STRAPI_URL="https://api.perform-develop.tk";
    this.STRAPI_TOKEN="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJfaWQiOiI1ZDRkMGVhNzNmMWEwOTJhZDk2YzU3MzMiLCJpZCI6IjVkNGQwZWE3M2YxYTA5MmFkOTZjNTczMyIsImlhdCI6MTU2NTk0NDM1MywiZXhwIjoxNTY4NTM2MzUzfQ.qvMra00b075NN-KsG6sM0nWErwAia_gl9IEabb6KQmA";
    this.BOOTH_ID='';
    this.state={
      products:[],
      newProduct:{
        name:'',
        price:0
      }
    };
  }
  

  
  //api utilities
  getRandomId(max=100) {
    return Math.floor(Math.random() * Math.floor(max));
  }
  
  getProducts(){
    const url=`${this.STRAPI_URL}/posts`;
    const res=fetch(this.STRAPI_URL+'/products',{
      headers:{
        'Authorization':`Bearer ${this.STRAPI_TOKEN}`,
      }
    }).then(res=>{
      return res.json();
    }).catch(err=>{
      console.log("err",err);
    }).then(data=>{
      console.log("data",data);
      this.setState({products:data});
    });
  }
  
  createProduct(name,price){
    return new Promise((resolve,reject)=>{
      const _id=fetch(`${this.STRAPI_URL}/products/`,{
        method:'POST',
        headers:{
          'Authorization':`Bearer ${this.STRAPI_TOKEN}`,
          'Content-Type':'application/json',
          'Accept':'application/json'
        },
        body:JSON.stringify({
          'name':name,
          'price':price,
          //'booth':[],
        })
      }).then(res=>{
        return res.json();
      }).catch(err=>{
        console.log("err",err);
      }).then(data=>{
        resolve(data._id);
      });
    });
  }
  
  updateProductPrice(_id,price){
    const res=fetch(`${this.STRAPI_URL}/products/${_id}`,{
      method:'PUT',
      body:JSON.stringify({
        'price':price,
      }),
      headers:{
        'Authorization':`Bearer ${this.STRAPI_TOKEN}`,
        'Content-Type':'application/json',
        'Accept':'application/json'
      }
    }).then(res=>{
      console.log('update price',_id,price);
      return res.json();
    }).catch(err=>{
      console.log("err",err);
    });
  }

  deleteProduct(_id){
    const res=fetch(`${this.STRAPI_URL}/products/${_id}`,{
      method:'DELETE',
      headers:{
        'Authorization':`Bearer ${this.STRAPI_TOKEN}`,
      }
    }).then(res=>{
      console.log(`delete ${_id}`);
      return res.json();
    }).catch(err=>{
      console.log("err",err);
    });
  }
  
  //
  componentDidMount(){
    console.log("component did mount");
    this.getProducts();
  }
  
  //handler
  handleChangePrice(event){
    const index=this.state.products.findIndex(
      product=>event.target.name === product.id.toString());
    const products=this.state.products.slice();
    products[index].price=parseInt(event.target.value,10);
    this.setState({products:products})
    //updateProductPrice(event.target.name,event.target.value);
  }

  handleAddItem(event){
    const _id=this.createProduct(
      this.state.newProduct.name,this.state.newProduct.price)
      .then(_id=>{
        console.log("new item's id",_id);
        const newProduct=Object.assign({},this.state.newProduct);
        newProduct.id=_id;
        const products=this.state.products.concat(newProduct);
        this.setState({
          products,
          newProduct:{
            name:'',
            price:0
          }
        });
      });
  }
  handleChangeNewProductName(event){
    const newProduct=Object .assign({},this.state.newProduct);
    newProduct.name=event.target.value;
    this.setState({newProduct});
  }
  
  handleChangeNewProductPrice(event){
    const newProduct=Object.assign({},this.state.newProduct);
    newProduct.price=parseInt(event.target.value,10);
    this.setState({newProduct});
  }

  handleUpdate(event){
    console.log(event.target); 
    const index=this.state.products.findIndex(
      product=>event.target.name === product.id.toString());
    this.updateProductPrice(
      event.target.name,this.state.products[index].price)
  }
  
  handleDelete(event){
    console.log(event.target); 
    const index=this.state.products.findIndex(
      product=>event.target.name === product.id.toString());
    const products=this.state.products.slice();
    products.splice(index,1);
    this.setState({products});
    this.deleteProduct(event.target.name);
  }

  render(){
    return(
      <React.Fragment>
      <form className="">
        <div className="">
          <label>name</label>
          <input 
            value={this.state.newProduct.name}
            onChange={
              (event)=>{
                this.handleChangeNewProductName(event)
               }}>
          </input>
          <label>price</label>
          <input 
            type="number" 
            value={this.state.newProduct.price}
            onChange={
              (event)=>{
                this.handleChangeNewProductPrice(event)
               }}>
          </input>
          <input 
            type="button" 
            onClick={(event)=>this.handleAddItem(event)} 
            value="add Item"></input>
        </div>
      </form>
      <form onSubmit={(event)=>this.handleSubmit(event)} >
        <ul>
        {this.state.products.map((value,index)=>{
          return(
            <li 
              key={value.id} 
              style={{listStyle:'none',padding:'2px'}}>
              <div className="">
                <span 
                  className="m-2"
                  style={{padding:'2px'}}>
                  名前 : {this.state.products[index].name} 
                </span>
                <label className="">値段</label>
                <input 
                  type="number" 
                  value={this.state.products[index].price}
                  name={value.id}
                  onChange={
                    (event)=>{this.handleChangePrice(event)}}>
                </input>
                <input 
                  type="button" 
                  value="update"
                  className="m-2 px-2"
                  name={value.id}
                  onClick={(event)=>{this.handleUpdate(event)}}/>
                <input 
                  type="button" 
                  value="delete"
                  className="m-2 px-2"
                  name={value.id}
                  onClick={(event)=>{this.handleDelete(event)}}/>
              </div>
            </li>
          )
          })
        }</ul>
       </form>
      </React.Fragment>
    )
  }
}

function App(){
  return (
    <>
      <div id="body" className="px-2 text-center rounded">
        <Form></Form>  
      </div>
      
    </>
  );
}

Sentry.init({dsn: "https://97ef32c9ffa842e3822bae4eea4915e0@sentry.io/1532816"});
Sentry.captureMessage('Something went wrong');
const rootElement = document.getElementById("app");
ReactDOM.render(<App />, rootElement);

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.9.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js"></script>
<script src="https://browser.sentry-cdn.com/5.6.1/bundle.min.js"></script>

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.1.2/tailwind.min.css" rel="stylesheet" />