如何在node.js上将reactJS与mysql连接起来

Question

I am trying to insert form data from reactJS to mysql database on Node.js. I am beginner in reactJS so please help me.

import React from 'react';
import Layout from './App.jsx';

class Header extends React.Component{

constructor(props) {
  super(props);
  this.handleSubmit = this.handleSubmit.bind(this);
}

handleSubmit(event) {
 var fname=this.refs.fname.value; //This variable holds firstname 
}
render() {
  return (
    <div>
      <form onSubmit={this.handleSubmit}>
      <h1>Registration Form: </h1>
      <label>
       First Name:
       <input type="text" ref="fname" value={this.state.fname}  /><br/><br/>
      </label><br/>
      <label>
       Last Name:
       <input type="text" ref="lname" value={this.state.lname}  /><br/><br/>
      </label><br/>
    <input type="submit" value="Submit" />      
  </form>
 </div> 
);
 }
}
export default Header;

Above code is Header.jsx which renders form

The variable fname contains value which I want to insert into mysql database.

Answer 1

Well, the answer of your question may go deep into flux (or redux) architecture and talking about services, dispatching actions and so on. If you want to do it properly then you'll probably need to learn about this stuff. If you want to do it quickly then you may pass whatever you want to the component via props. For example:

var storeToDatabase = function(username) {
  // here you call a backend endpoint with some library like superagent
}

<Header store={ storeToDatabase } />

// and then in your Header.jsx component
handleSubmit(event) {
 var fname = this.refs.fname.value;

 this.props.store({ fname });
}

So, React is only about rendering views. All the other stuff should be handle outside of it.

Answer 2

It seems you are a little confused. First of all, what you want to do is to send a request to a Node.js server, which will handle the request and save it to the database. You don't connect React to MySQL.

To do this you could install a library to make the request, eg superagent . You import it: import request from 'superagent' . Then you should do something like this:

handleSubmit(event) {
  var fname=this.refs.fname.value; //This variable holds firstname
  request.post('/api/name').send({ name: fname }).end(callback);
}

Where callback is a function which will receive the server response and you can do whatever you want with it.

In the server, if you are for exampling using Express, you should do something like this:

app.post('/api/name', function(req, res) {
  // code for saving the name in the database
})

By the way, you don't need Redux store (which Krasimir said). This has nothing to do with Redux and application state.