Select Dinâmico com REACT JS, PHP e MYSQL

Nessa vídeo-aula vamos fazer um select dinâmico com REACT JS, PHP e MySql buscando os dados de marca e modelo do nosso veículo diretamente do banco de dados.

Criando nosso banco de dados

CREATE TABLE 'carros' (
  'Id' int(11) NOT NULL,
  'Marca' varchar(30) NOT NULL,
  'Modelo' varchar(30) NOT NULL,
  'Ano' varchar(10) NOT NULL
);
INSERT INTO 'carros' ('Id', 'Marca', 'Modelo', 'Ano') VALUES
(1, 'Fiat', 'Uno', '2002'),
(2, 'Chevrolet', 'Camaro', '2016'),
(3, 'Ford', 'Fiesta', '2014'),
(4, 'Ford', 'Ka', '2001'),
(5, 'Chevrolet', 'Monza', '2001'),
(6, 'Ford', 'Focus', '1999'),
(7, 'Wolkwagen', 'Gol', '2002');
ALTER TABLE 'carros' ADD PRIMARY KEY ('Id');
ALTER TABLE 'carros' MODIFY 'Id' int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=8;

Criando nossa API PHP

Nossa API php terá 3 arquivos: index.php, ClassConexao.php e ClassSelecao.php

#Index.php
include("ClassSelecao.php");
$Selecao=new ClassSelecao();
$Campo=json_decode(file_get_contents("php://input"),true);
if($Campo == null){
    $Selecao->selecao(null);
}else{
    $Selecao->selecao($Campo['Modelo']);
}

abstract class ClassConexao{

    #conexão com o banco de dados
    protected function conectaDB()
    {
        try{
            $Con=new PDO("mysql:host=localhost;dbname=react","root","");
            return $Con;
        }catch (PDOException $Erro){
            return $Erro->getMessage();
        }
    }
}

include("ClassConexao.php");

class ClassSelecao extends ClassConexao{

    #Selecionar os dados no db
    public function selecao($Par=null){
        if($Par==null){
            $Crud=$this->conectaDB()->prepare("select DISTINCT Marca from carros");
        }else{
            $Crud=$this->conectaDB()->prepare("select * from carros where Marca = :marca");
            $Crud->bindParam(":marca",$Par,PDO::PARAM_STR);
        }
        $Crud->execute();

        $I=0;
        $J=[];

        while($Fetch=$Crud->fetch(PDO::FETCH_ASSOC)){
            if($Par == null){
                $J[$I]=[
                    "Resposta"=>$Fetch['Marca']
                ];
            }else{
                $J[$I]=[
                    "Resposta"=>$Fetch['Modelo']
                ];
            }
            $I++;
        }
        header("Access-Control-Allow-Origin: *");
        header("Content-type: application/json");
        echo json_encode($J);
    }
}

Criando os componentes REACT JS

Neste exemplo teremos 02 componentes react: App.js e Select.js

import React, {Component} from 'react';
import Select from './Select';

const Root="http://"+document.location.hostname+"/app/";

export default class App extends Component{

    constructor(){
        super();
        this.state=({
            dbMarca:[],
            dbModelo:[],
            dbAno:[],
            visibilidade: 'none'
        });

        this.exibirDados();
    }

    exibirDados(Par)
    {
        fetch(Root+"src/api/index.php",{
            method:'POST',
            body: JSON.stringify({
                Modelo: Par
            })
        })
        .then((response)=>response.json())
        .then((responseJson)=>
        {
            if(this.state.dbMarca === undefined || this.state.dbMarca == 0){
                this.setState({
                    dbMarca: responseJson
                });
            }else{
                this.setState({
                    dbModelo: responseJson
                })
            }
            console.log(responseJson);
        }
        );
    }

    alterarVisibilidade()
    {
        this.setState({
            visibilidade:'block'
        })
    }

    render(){
        return(
            <div>
                <Select visibilidade="block" funcao={this.exibirDados.bind(this)} funcao2={this.alterarVisibilidade.bind(this)} dados={this.state.dbMarca} />
                <br/><br/>
                <Select visibilidade={this.state.visibilidade} funcao={this.exibirDados.bind(this)} funcao2="" dados={this.state.dbModelo} />
            </div>
        );
    }
}

Arquivo Select.js:

import React, {Component} from 'react';

export default class Select extends Component{

    handleChange(e){
        e.preventDefault();
        const Valor=e.target.value;
        this.props.funcao(Valor);
        if(this.props.funcao2 != null){
            this.props.funcao2();
        }
    }

    render(){
        return(
            <select><option value="">Selecione</option>
                {
                    this.props.dados.map(
                        row=><option value="{row.Resposta}">{row.Resposta}</option>
                    )
                }
            </select>
        );
    }

}