在反应中从数据库中读取下拉列表的数据

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 数据库）是“后端”执行的最受欢迎的任务之一，“后端”是应用程序“在后台”执行逻辑任务的一部分。如果你想坚持 JS，可以是 Express.js + Node.js。

您可以将它们视为两个独立的应用程序，通过端点进行通信。我建议你阅读后端/前端的概念:)