React没有在网页中呈现? (W /把手)

时间:2017-08-20 19:20:17

标签: javascript node.js reactjs express handlebars.js

我正在尝试对网站的一小部分做出反应,但出于某种原因,它并没有呈现出如此真实的东西。我正在使用node,express,React和handlebars。

landing.handlebars:

  <section class="section section-dark">
  <div id="root"></div>
  <script type="text/jsx" src="index.js"></script>

index.jsx:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

App.jsx:

import React, { Component } from 'react';


class App extends Component {
 constructor(props) {
 super(props);
  this.state = {
  name: null,
  email: null,
  message: null,
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);

}
handleChange(event) {
const target = event.target;
const value = target.value;
const name = target.name;
this.setState({
  [name]: value
});
}
 handleSubmit(event) {
 event.preventDefault();
 }
render() {
 return (
 <div className="App">
<h2 className="bottom">Send Message!</h2>
    <form  onSubmit={this.handleSubmit}  className="bottom">
        <div className="form-group">
            <label for="exampleInputEmail1">Email address:</label>
            <input type="email"  onChange= {this.handleChange} value = {this.state.email} className="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email" />
            <small id="emailHelp" className="form-text text-muted">We'll never share your email with anyone else.</small>
        </div>

        <div classNameName="form-group">
            <label for="exampleInputPassword1">Name:</label>
            <input type="text"  onChange= {this.handleChange}  value={this.state.name} className="form-control" id="exampleInputPassword1" placeholder="Name" />
        </div>


        <div className="form-group">
            <label for="exampleTextarea">Message:</label>
            <textarea  onChange= {this.handleChange} value={this.state.message} className="form-control" id="exampleTextarea" rows="3"></textarea>
        </div>

        <button type="submit" value="submit" className="btn btn-primary"> <i 
  className="fa fa-paper-plane" aria-hidden="true"></i> Send</button>
    </form>
  </div>
   );
   }
  }
 export default App;

除了必要的(Jquery,bootstrap等)之外,它在网络标签中没有显示任何类型的jsx文件

0 个答案:

没有答案