从react中的数据库中读取下拉列表的数据

Question

这是我使用reactjs编写的一部分代码，其中我使用了3个下拉列表。事实上，我是手动提供数据(Source1、Source2、Source3、tech1、tech2、tech3…(，但现在我不想从数据库"Mysql"中获取它们。我如何转换代码以直接动态读取它们？

import React, { Component } from 'react';
import {
Container, Col, Form,
FormGroup, Label, Input,
Button, Dropdown, 
} from 'reactstrap';
import './App.css';
import loupe from'./loupe.png';
class App extends Component {
render() {
return (

<div className="box"> 

<div className="element sourcedropdown" >
<label>Source :</label>
<select className="form-control" name="Sources" onChange={this.handleInputChange}>
<option selected>Select Source</option>
<option value="1">Source1</option>
<option value="2">Source2</option>
<option value="3">Source3</option>
</select>
</div>
<div className="element Techdropdown">
<label>Technology :</label>
<select className="form-control" name="Tech" onChange={this.handleInputChange}>
<option selected>Select Technology</option>
<option className="dropdown-item" value="1">Tech1</option>
<option className="dropdown-item" value="2">Tech2</option>
<option className="dropdown-item" value="3">Tech3</option>
</select>
</div>


<div id="contrat" className="element contrat">
<label>Contract :</label>
<select className="form-control" name="Tech" onChange={this.handleInputChange}>
<option selected>Select contract</option>
<option className="dropdown-item" value="1">Cont1</option>
<option className="dropdown-item" value="2">Cont2</option>
<option className="dropdown-item" value="3">Cont3</option>
<option className="dropdown-item" value="3">Cont4</option>
</select>
</div>
<div id="checkbox" className ="element checkbox">
<label check>
<input type="checkbox" />{' '}
All
</label>
</div>
</div>  


);
}
}
export default App;

Answer 1

这是一个比你想象的更大的问题。React只是一个JS库，一种设计应用程序在浏览器中外观的语言；我们称之为"；前端"；。

访问数据库，即mysql数据库，是"mysql"执行的最流行的任务之一；"后端"；，执行逻辑任务的应用程序的一部分"；在背景中"；。如果你想坚持JS，它可以是Express.JS+Node.JS.

你可以把它们想象成两个独立的应用程序，通过端点进行通信。我建议你阅读关于后端/前端的概念：(