javascript - 使用 React.js 插入 MongoDB 文档

Question

我想知道是否有一种方法可以直接从 React 组件将文档插入到 MongoDB 集合中。

我当前的个人项目(用于培训目的)是一个小型聊天网络应用程序。例如，当我的用户想要在房间中发布新消息时，输入组件应如下所示:

var NewMessageInput = React.createClass({
  postMessage: function(value) {
    db.collection.insert({
      content: value
    });
  },
  render: function() {
    return (
      <div>
        <input onSubmit={() => this.postMessage(value)}>Type your message here</input>
      </div>
    );
  }
});

我知道如何让应用程序运行在 Express、React 和 MongoDB 上，但我只能使用 mongo shell 插入文档并在路由加载时查询它们。另外，我想只使用 react-router 作为我的路线，这就是我有这个问题的原因。

Answer 1

我猜您需要服务器上的数据库，因此您可能需要一个 API 来发布数据，因为数据库本身不在客户端上。我用Superagent用于发送数据和 Mongoose创建架构和 mongo 数据库。

messageModel.js

const mongoose = require('mongoose');

const Schema = mongoose.Schema;

// create a schema
const messageSchema = new Schema({
  // You may need to add other fields like owner
  addedOn: String,
  message: String,
});
const Message = mongoose.model('Message', messageSchema);
module.exports = Message;

server.js

import Message from './models/messageModel';

mongoose.connect('mongodb://user:pass@localhost:port/database');

app.post('/api/messages', (req, res) => {
  const doc = new Message({ message: req.body.message })
  doc.save();
});

client.js

import React, { Component } from 'react';
import request from 'superagent';

class componentName extends Component {
  constructor(props) {
    super(props);
    this.state = {
      message: '',
    };
    this.handleMessageInput = this.handleMessageInput.bind(this);
  }
  handleMessageInput(e) {
    this.setState({ message: e.target.value });
  }
  handleSubmitMessage() {
    console.log('starting to submit profile');
    if (this.state.isFormFilledProfile) {
      console.log('Profile Form appears filled');
      const data = {
        message: this.state.message,
      };

      request
        .post('/api/messages')
        .send(data)
        .set('Accept', 'application/json')
        .end((err, res) => {
          if (err || !res.ok) {
            console.log('Oh no! err');
          } else {
            console.log('Success');
          }
        });
    }
  }
  render() {
    return (
      <div>
        <div>
          <form onSubmit={this.handleSubmitMessage}>
            <input
              onChange={this.handleMessageInput}
              value={this.state.message}
            />
            <button type='Submit' value='Submit'>Submit</button>
          </form>
        </div>
      </div>
    );
  }
}

export default componentName;

您可能还需要阅读 react 表单指南 here.祝一切顺利!!!