我正在尝试学习ReactJ和NodeJ,这是我第一次同时使用它们。 我有一个应用程序,其中使用NodeJs和Express创建后端,并在ReactJs中创建前端。
服务器正在正常运行,所有端点均已通过Postman测试。 我正在尝试通过创建新项将前端与后端连接起来。
这是一个简单的CRUD应用,可以在酒店中创建,更新和删除房间。
我有一个父组件App.js
和两个子组件。
一个子组件是Admin.js
,用户可以在其中更改房间的详细信息,另一个子组件是LandingPage.js
,其中应该显示更改。
App.js
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
initialTitle: '',
initialDescription: '',
initialPrice: ''
}
}
onChangeTitle(newTitle) {
this.setState({
initialTitle: newTitle
});
}
onChangeDescription(newDescription) {
this.setState({
initialDescription: newDescription
});
}
onChangePrice(newPrice) {
this.setState({
initialPrice: newPrice
});
}
onSubmit(e) {
e.preventDefault();
const obj = {
initialTitle: this.state.initialTitle,
initialDescription: this.state.initialDescription,
initialPrice: this.state.initialPrice
};
axios.post('http://localhost:27017/admin/add', obj)
.then(res => console.log(res.data));
this.setState({
initialTitle: '',
initialDescription: '',
initialPrice: ''
})
}
render() {
return (
<div>
<Route path = "/" exact component = {LandingPage}/>
<Route path = "/admin" component = {() =>
<Admin
initialTitle = {
this.state.initialTitle
}
initialDescription = {
this.state.initialDescription
}
initialPrice = {
this.state.initialPrice
}
changeTitle = {
this.onChangeTitle.bind(this)
}
changeDescription = {
this.onChangeDescription.bind(this)
}
changePrice = {
this.onChangePrice.bind(this)
}
onSubmit = {
this.onSubmit
}
/>}/ >
Admin.js
我正在使用Boostrap 4模式。当我单击按钮时,将弹出模式对话框,我应该插入房间详细信息,然后单击“保存”按钮。
class Admin extends React.Component {
constructor(props) {
super(props);
this.state = {
title: props.initialTitle,
description: props.initialDescription,
price: props.initialPrice
}
}
onFormSubmit() {
console.log("save");
this.props.changeTitle(this.state.title)
this.props.changeDescription(this.state.description)
this.props.changePrice(this.state.price)
}
onHandleTitleChange(event) {
this.setState({
title: event.target.value
});
}
onHandleDescriptionChange(event) {
this.setState({
description: event.target.value
});
}
onHandlePriceChange(event) {
this.setState({
price: event.target.value
});
}
render() {
return (
<div>
<button type="button" data-toggle="modal" data-target="#createModal" class="btn btn- primary btn-lg btn-block mb-5">Add new room</button>
</div>
<div className="modal-body">
<form onSubmit={this.onFormSubmit}>
<div className="form-group">
<label htmlFor="title" className="col-form-label">Title:</label>
<input
type="text"
value={this.state.title}
onChange{(event)=>this.onHandleTitleChange(event)}
/>
</div>
<div className="form-group">
<label htmlFor="message-text" className="col-form-label">Description:</label>
<textarea
type="text"
value={this.state.description}
onChange{(event)=>this.onHandleDescriptionChange(event)}"></textarea>
</div>
<div className="form-group">
<label htmlFor="title" className="col-form-label">Price:</label>
<input
type="text"
value={this.state.price}
onChange={(event)=>this.onHandlePriceChange(event)} />
</div>
</form>
</div>
<div className="modal-footer">
<button type="button" className="btn btn-secondary"
data-dismiss="modal">Close</button>
<button data-backdrop="false" type="button"
className="btn btn-primary">Save</button>
</div>
</div>
</div>
</div>
</div>
)
}
}
export default requireAuth(Admin);
当我按下“保存”按钮时,什么也没发生,我没有任何错误,我的数据也没有保存在数据库中。
后端代码
room.route.js
// Defined store route
roomRoutes.route('/add').post(function (req, res) {
let room = new Room(req.body);
room.save()
.then(room => {
res.status(200).json({'room': 'room in added successfully'});
})
.catch(err => {
res.status(400).send("unable to save to database");
});
});
index.js
//DB setup
mongoose.connect("mongodb://localhost:27017/hotel", { useNewUrlParser: true });
//App setup
app.use(morgan('combined')); //every incoming request is passed to morgan and bodyParser
app.use(cors());
app.use(bodyParser.json({type: '*/*'})); //morgan and bodyParser are like middleware in express
app.use('/admin', roomRoute);
router(app);
//Server setup
const port = process.env.PORT || 3090;
//create http server who knows how to recieve request and send to app
const server = http.createServer(app);
server.listen(port);
console.log('server listenining on ', port);
任何建议都非常感谢。
答案 0 :(得分:0)
在功能onFormSubmit
的“管理”组件中,您还需要调用onSubmit
属性。
onFormSubmit() {
console.log("save");
this.props.changeTitle(this.state.title)
this.props.changeDescription(this.state.description)
this.props.changePrice(this.state.price)
this.props.onSubmit()
}
答案 1 :(得分:0)
那么您需要调用App
组件的onSubmit
方法来使其工作。您将其作为道具传递给Admin
组件,但根本没有在Admin
组件中使用。
在您的Admin
组件的onFormSubmit
方法中,调用this.props.onSubmit
将调用发送到App
组件的onSubmit
方法,然后只有它会调用ur后端。 / p>
将onFormSubmit方法更改为此:
onFormSubmit() {
console.log("save");
this.props.changeTitle(this.state.title)
this.props.changeDescription(this.state.description)
this.props.changePrice(this.state.price)
this.props.onSubmit();
}
是的,在submit
组件中将按钮类型更改为Admin
试试看,让我知道。希望能帮助到你!!