Update em um CRUD no Clent

Fala Gabriel, tudo bem?

No caso, você não irá chamar as funções diretamente, como é uma api, nós acessaremos através de rotas criadas no backend, para entender sobre requisições, api e rotas recomendo a formação node.Js com Express para entender um pouco melhor como funciona.

Mas com a api pronta, você pode começar a manipular o formulario, alterando os valores dos campos do input para controlaveis através dos estados, assim como ensinado no curso React: Function Components, uma abordagem moderna.

No exemplo abaixo, vamos simular uma api que irá cadastrar um usuário, e precisa receber os campos: username, email e password. Primeiro vamos criar um formulário com os campos com inputs controláveis:

import React, { useState } from "react";

function Form() {

  const [formFields, setFormFields] = useState({
    username: "",
    email: "",
    password: "",
  })

  function handleChange(event) {
    const name = event.target.name
    const value = event.target.value

    const newFormFields = { ...formFields, [name]: value }

    setFormFields(newFormFields)
  }

  return (
    <form>
      <div>
        <label>Usuário</label>
        <input
          type="text"
          value={formFields.username}
          name="username"
          onChange={handleChange}
        />
      </div>

      <div>
        <label>E-mail</label>
        <input
          type="text"
          value={formFields.email}
          name="email"
          onChange={handleChange}
        />
      </div>

      <div>
        <label>Senha</label>
        <input type="password"
          value={formFields.password}
          name="password"
          onChange={handleChange}
        />
      </div>

      <button type="submuit">Cadastrar</button>
    </form>
  )
}

No componente acima, criamos um estado chamado formFields que será aonde guardaremos o valores dos nossos inputs, então, eu vinculo cada propriedade ao seu respectivo input, através da propriedade value, logo após isso, crio uma função chamda handleChange que irá cuidar da parte de alterar o valor desses estados, alterando o objeto de acordo com o name do input.

Agora, ja conseguimos alterar o input e enviar para o estado esses valores.

Vamos então criar uma função que irá pegar esses dados e enviar para uma api ao submeter o formulário, nesse caso estarei utilizando o fetch do próprio JavaScript:

async function handleSubmit(event) {
    event.preventDefault()

    await fetch("https://minhaapi/cadastrar", {
        method: "POST",
        body: formFields
    })
}

O que essa função faz é utilizar o fetch para fazer a requisição, com o método POST, enviando no body os dados salvos naquele estado que criamos com o nome formFields. Então agora o que precisamos fazer é linkar essa função com o evento de onSubmit do formulário:

<form onSubmit={handleSubmit}>
    <div>
      <label>Usuário</label>
      <input
        type="text"
        value={formFields.username}
        name="username"
        onChange={handleChange}
      />
    </div>

    <div>
      <label>E-mail</label>
      <input
        type="text"
        value={formFields.email}
        name="email"
        onChange={handleChange}
      />
    </div>

    <div>
      <label>Senha</label>
      <input type="password"
        value={formFields.password}
        name="password"
        onChange={handleChange}
      />
    </div>

    <button type="submuit">Cadastrar</button>
  </form>

Assim conseguimos enviar os dados para a nossa API. Então recaptulando, o que fazemos é criar um formulário, criar um estado para armazenar os valores dos inputs, tornar os inputs controláveis, e fazemos também a requisição para uma api utilizando o fetch.

Caso não tenha entendido muito bem o que foi feito aqui, recomando fazer os seguinte cursos:

• [HTTP: Entendendo a web por baixo dos panos](HTTP: Entendendo a web por baixo dos panos)
• JS na web: CRUD com JavaScript assíncrono
• Node.js com Express
• React: Function Components, uma abordagem moderna
• React: Hooks, Contextos e boas práticas

Espero ter ajudado, bons estudos :D