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

Question

我试图将reactJS中的表单数据插入Node.js上的mysql数据库。 我是reactJS的初学者，所以请帮助我。

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;

上面的代码是Header.jsx ，它呈现了表单

变量fname包含我要插入mysql数据库的值。

Answer 1

那么，你的问题的答案可能会深入到通量（或redux）架构和谈论服务，调度行动等等。 如果你想做得好，那么你可能需要了解这些东西。 如果你想快速完成，那么你可以通过道具将你想要的任何东西传递给组件。 例如：

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 });
}

所以，React只是关于渲染视图。 所有其他的东西应该在它之外处理。

Answer 2

看来你有点困惑。 首先，您要做的是向Node.js服务器发送请求，该服务器将处理请求并将其保存到数据库。 你没有将React连接到MySQL。

要做到这一点，你可以安装一个库来发出请求，例如superagent 。 你导入它： import request from 'superagent' 。 然后你应该做这样的事情：

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

callback是一个接收服务器响应的函数，你可以用它做任何你想做的事情。

在服务器中，如果您要使用Express进行示例，则应该执行以下操作：

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

顺便说一下，你不需要Redux商店（Krasimir说）。 这与Redux和应用程序状态无关。