Masukkan dokumen MongoDB dengan React.js

Saya kira Anda akan memerlukan database di server, jadi Anda mungkin memerlukan API untuk memposting data karena database itu sendiri tidak ada di klien. Saya menggunakan Superagent untuk mengirim data dan Mongoose untuk membuat skema dan database 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:[email protected]: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;

Anda mungkin juga perlu membaca panduan formulir reaksi di sini. Semua yang terbaik!!!