.Net Core - ReactJS - Cadastrando e alterando dados

Na aula de hoje vamos fazer o cadastro e alteração dos dados do cliente.

Vamos inserir um componente button chamado Novo, utilizando Link, logo abaixo do fechamento da tag table.

      
        < Link  className="btn btn-primary"  to={ `/cliente/novo` } > Novo < /Link> 
       
    

O código completo ficará assim:

      
        class Clientes extends Component {
          constructor(){
            super()
            this.clientes = []
          }
          componentDidMount(){
            axios.get('https://localhost:5001/clientes').then(response => {
              console.log(response);
              this.clientes = response.data
            })
          }

          render() {
            return (
                < div>
                < Header>< /Header>
                < main className="col-lg-7 mb-5">
                  < h1 className="display-5 mb-3 fw-semibold lh-sm">Lista de Clientes - { this.clientes.length }< /h1>
                  < table className="table"
                    < thead>
                      < tr>
                        < th>Nome< /th>
                        < th>Telefone< /th>
                        < th>endereço< /th>
                      < /tr>
                    < thead>
                    < tbody>
                      {
                        this.state.clientes.map((cliente, index) => (
                          < tr key={index}>
                          < td>{cliente.nome}< /td>
                          < td>{cliente.telefone}< /td>
                          < td>{cliente.endereco}< /td>
                          < td>< Link Link to={ `/cliente/${cliente.id}` } > {cliente.id} < /Link> Editar< /td>
                        < /tr>
                        ))
                      }
                    < /tbody>
                  < /table>
                  < Link  className="btn btn-primary"  to={ `/cliente/novo` } > Novo < /Link> 
                < /main>
                < Footer>< /Footer>
              < /div>
              )
            }
          }
  
        export default Clientes;
  
       
    

Iremos criar a rota para o button Novo, no arquivo index.js.

      
        import { BrowserRouter, Switch, Route } from 'react-router-dom'
        import Clientes from './views/Clientes';
        < BrowserRouter>
          < Switch> 
            < Route path="/" exact={true} component={App} />
            < Route path="/clientes" component={Clientes} />
            < Route path="/cliente/novo" component={ClienteMostrar} />
            < Route path="/cliente/:id" component={ClienteMostrar} />
            < Route path="*" component={Pagina404} />
          < /Switch> 
        < /BrowserRouter>
       
    

Vamos criar um formulário direto na página clienteMostrar.

      
        import React, { Component } from 'react';
        import Header from './shared/Header';
        import Footer from './shared/Footer';
  
        class ClienteMostrar extends Component {
          render() {
          return (
              < div>

              < Header>< /Header>
              
              < main className="bd-masthead" id="content" role="main">
                < div className="container">
                  < div className="row">
                    < div className="col-12 mx-auto col-md-8">
                      < h1 className="mb-3">Mostrando Cliente  {this.id}< /h1>
                      < form>
                        
                        < div className="form-group">
                          < label for="nome">Nome< /label>
                          < input type="text" className="form-control" id="nome" name="nome" placeholder="Digite o nome" />
                        < /div>

                        < div className="form-group">
                          < label for="nome">Telefone< /label>
                          < input type="text" className="form-control" id="telefone" name="telefone" placeholder="Digite o telefone" />
                        < /div>

                        < div className="form-group">
                          < label for="nome">Endereço< /label>
                          < input type="text" className="form-control" id="endereco" name="endereco" placeholder="Digite o endereço" />
                        < /div>

                        < button type="button" className="btn btn-primary">Salvar< /button>
                      < /form>      
                    < /div>                    
                  < /div>
                < /div>
              < /main>
              < Footer>< /Footer>
            < /div>
            )
          }
        }
  
        export default ClienteMostrar;
  
       
    

O próximo passo será criar alguns métodos necessários para fazer o cadastro e alteração.

Primeiro método que vamos utilizar será o componentDidMount.

Vamos criar o objeto cliente no state e inserir o objeto na propriedade value do componente input.

Iremos alterar a propriedade for do label para htmlFor.

      
        import axios from 'axios';

        class ClientesMostrar extends Component {
          state = {
            cliente: {
              id: 0,
              nome:"",
              telefone:"",
              endereco:""
            }
          }
          componentDidMount(){
            let id = this.props.match.params.id
            if (id){
              axios.get('https://localhost:5001/clientes/${id}').then(response => {
                const cliente = response.data
                this.setState({ cliente});
              })
            }
          }

          render() {
            return (
              < div>
                < Header>< /Header>
                < main className="bd-masthead" id="content" role="main">
                  < div className="container">
                    < div className="row">
                      < div className="col-12 mx-auto col-md-8">
                        < h1 className="mb-3">Mostrando Cliente  {this.id}< /h1>
                        < form>
                          
                          < div className="form-group">
                            < label htmlFor="nome">Nome< /label>
                            < input type="text" className="form-control" id="nome" name="nome" value="this.state.cliente.nome" placeholder="Digite o nome" />
                          < /div>

                          < div className="form-group">
                            < label htmlFor="nome">Telefone< /label>
                            < input type="text" className="form-control" id="telefone" name="telefone" value="this.state.cliente.telefone" placeholder="Digite o telefone" />
                          < /div>

                          < div className="form-group">
                            < label htmlFor="nome">Endereço< /label>
                            < input type="text" className="form-control" id="endereco" name="endereco" value="this.state.cliente.endereco" placeholder="Digite o endereço" />
                          < /div>

                          < button type="button" className="btn btn-primary">Salvar< /button>
                        < /form>      
                      < /div>                    
                    < /div>
                  < /div>
                < /main>
                < Footer>< /Footer>
              < /div>
              )
            }
          }
  
        export default ClientesMostrar;
  
       
    

Vamos criar o método onChange para que o campo não seja somente leitura para fazermos alterações dos dados.

      
        onChange = (e) => {
          let cliente = this.state.cliente
          cliente[e.target.name] = e.target.value 
          this.setState({cliente: cliente})
        }
  
       
    

Em cada componente input, vamos inserir o método onChange

      
        < div className="form-group">
         < label htmlFor="nome">Nome< /label>
          < input type="text" className="form-control" id="nome" name="nome" value="this.state.cliente.nome" onChange="{this.onChange}" placeholder="Digite o nome" />
        < /div>
       
    

Método salvar por parâmetro

Vamos criar um método salvar() para receber o objeto cliente por parâmetro

      
         salvar (cliente) {
          if (this.state.cliente.id > 0){
            axios.put('https://localhost:5001/clientes/${cliente.id},cliente').then(response => {
              const cliente = response.data
              this.props.history.push("/clientes")
            })
          }
          else {
            axios.post('https://localhost:5001/clientes,cliente').then(response => {
              this.props.history.push("/clientes")
            })
          }
        }
       
    

No componente button, vamos inserir o metodo salvar.

      
        < button  onClick= {() => {this.salvar(this.state.cliente)}} type="button" className="btn btn-primary">Salvar< /button>
       
    

Método salvar por state

Vamos criar um método salvar() por state, que altera ou cria um registro.

      
         salvar = (cliente) => {
          if (this.state.cliente.id > 0){
            axios.put('https://localhost:5001/clientes/${this.state.cliente.id}', this.state.cliente).then(response => {
              const cliente = response.data
              this.props.history.push("/clientes")
            })
          }
          else {
            axios.post('https://localhost:5001/clientes',this.state.cliente).then(response => {
              this.props.history.push("/clientes")
            })
          }
        }
       
    

No componente button, vamos inserir o metodo salvar .

      
        < button  onClick= {this.salvar} type="button" className="btn btn-primary">Salvar< /button>