我正在尝试对网站的一小部分做出反应,但出于某种原因,它并没有呈现出如此真实的东西。我正在使用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文件