Question

我是新来反应的人，我已经在react ut中创建了一个表单，然后不显示它也没有成功编译任何错误。

assets / js / app.js

 require('./bootstrap');
 import React from 'react';
 import { render } from 'react-dom';
 import { Router, route } from 'react-router';
 import Master from './components/Master';
 import CreateProduct from './components/CreateProduct';
 //import DisplayProduct from './components/DisplayProduct';
 //import UpdateProduct from './components/UpdateProduct';

 render(
 //<Router history={browserHistory}>
 <Router >
     <Route path="/" component={Master}>
     <Route path="/add-item" component={Createproduct}/>
     //<Route path="/display-item" component={DisplayProduct}/>
     //<Route path="/edit/:id" component={UpdateProduct}/>
     </Route>
 </Router>,
 document.getElementById('crud-app'));

assets / js / components / Master.js

  import React , {Component} from 'react';
  import { Router, route} from 'react-router';
  import { Link} from 'react-router-dom';

  class Master extends Component{
render(){
   return(
        <div className="container">
          <nav>
           <ul>
                <li><Link to="/">Home</Link></li>
                <li><Link to="add-item">Create Product</Link></li>  
           </ul>
           </nav>
            <div>
                 {this.props.children}
            </div>
        </div>
    )
   }
  }

 export default Master;

assets / js / components / CreateProduct.js

     import React , { Component } from 'react';
 //import { browserHistory } from 'react-router';
 import MyGlobleSettings from './MyGlobleSetting';

class CreateProduct extends Component{
constructor(props){
    super(props);

    this.state={productTitle:'',productBody:''};

    this.handleChange1=this.handleChange1.bind(this);
    this.handleChange2=this.handleChange2.bind(this);
    this.handleSubmit=this.handleSubmit.bind(this);
}

handleChange1(e){
    this.setState({
        productBody:e.target.value
     })
}   

handleChange2(e){
    this.setState({
        productTitle:e.target.value
    })
}

handleSubmit(e){
    e.preventDefault();

    const products={
        title:this.state.productTitle,
        body:this.state.productBody
    }

    let uri=MyGlobleSettings.url + '/api/products';
    axios.post(uri,products);
      /*axios.post(uri,products).then(response()=>{
        //browserHistory.push('/display-item');

       });*/
    }

render(){
    return(
       <div>
          <h1>Create Product</h1>
          <div>
          <form onSubmit={this.handleSubmit}>
         <div>                   
             <textarea onChange={this.handleChange1}></textarea>
         </div>
         <div>
             <input type="text" onChange={this.handleChange2}/>
         </div>

         <div>
         <button>Add Product</button>
         </div>
         </form>
         </div>
       </div>    
    )
   }
  }

 export default CreateProduct;

views / welcome.blade.php

   <!DOCTYPE html>
 <html>
 <head>
</head>
 <body>

 <div id="crud-app">

 <script src="{{asset('js/app.js')}}"></script>
 </div>
 </body>
 </html>

assets / js / components / MyGlobleSetting.js

   class MyGlobleSetting{
constructor(){
  this.url='http://localhost:8000';
}

}

export default (new MyGlobleSetting);

assets / js / bootstrap.js

window._ = require('lodash');
window.Popper = require('popper.js').default;

try {
window.$ = window.jQuery = require('jquery');

require('bootstrap');
 } catch (e) {}

 window.axios = require('axios');

 window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';


 let token = document.head.querySelector('meta[name="csrf-token"]');

if (token) {
window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x- 
 csrf-token');
}

因为它没有显示任何错误，我不知道问题出在，请让我知道我在哪里错了

使用react js laravel作为后端不显示创建表单

0 个答案: