1

Estou com dificuldade de achar uma solução para limpar o campos input após clicar no botão calcular.

Segue o código de forma simplificada

function EqBernoulli2 () {
  const [Pt, setPt] = useState('')
  const [Ps, setPs] = useState('')
  const [V, setV] = useState('')
  const [ρ, setρ] = useState('')
  const [resultado3, setResultado3] = useState()

  function calcular3 () {
    if (V == '') {
      let Prest = Math.sqrt(parseFloat((2 * (Pt - Ps)) / ρ))
      setResultado3(Prest)
    }
  }

  return (
    <div className='eqbernoulli'>
      <EqBernoulliM>
        <h2>Calculo: </h2>
        <p className='obs'>
          <i>Obs:</i>
        </p>
        <div className='input'>
          <label htmlfor='nome'>
            P<sub>t</sub> =
          </label>
          <input
            className='pressão1'
            type='number'
            id='pressão1'
            required='required'
            value={Pt}
            onChange={e => setPt(e.target.value)}
          />
        </div>
        <div className='input'>
          <label htmlfor='nome'>
            P<sub>s</sub> =
          </label>
          <input
            className='velocidade1'
            type='number'
            id='velocidade1'
            required='required'
            value={Ps}
            onChange={e => setPs(e.target.value)}
          />
        </div>
        <div className='input'>
          <label htmlfor='nome'>V =</label>
          <input
            className='altura1'
            type='number'
            id='altura1'
            required='required'
            value={V}
            onChange={e => setV(e.target.value)}
          />
        </div>
        <div className='input'>
          <label htmlfor='nome'>ρ =</label>
          <input
            className='pressão1'
            type='number'
            id='pressão2'
            required='required'
            value={ρ}
            onChange={e => setρ(e.target.value)}
          />
        </div>
        <button className='calcular2' id='calcular' onClick={calcular3}>
          Calcular
        </button>
        <div className='result' id='resultado'>
          {resultado3}
        </div>
      </EqBernoulliM>
    </div>
  )
}
2
  • Atualizar o estado para ficar com uma string vazia não funciona? Por exemplo, setPt(''). O que você tentou e qual foi o problema? Commented 26/08/2021 às 0:00
  • Não tentei atualizar o estado. O que eu imaginei não consegui por em prática. Sou novo na área e em certas situações me sinto um pouco travado.
    – Mpimenta
    Commented 26/08/2021 às 0:24

1 Resposta 1

2

Lidar com formulários é complexo. Não é atoa que existem diversas bibliotecas para isso, como o React Hook Form, Formik, Unform etc.

Se você não usa uma biblioteca para lidar com o formulário, restam duas opções: componentes controlados (com estado - useState) ou componentes não controlados (com referência - useRef). No caso dessa pergunta, é usada a primeira opção, então explicarei apenas ela.

Formulário com componentes controlados

Em resumo, um input controlado tem uma cara assim:

function Form() {
  const [valor, setValor] = React.useState('');
  return <input onChange={(e) => setValor(e.target.value)} value={valor} />;
}

Isso envolve alguns conceitos:

  • Controle do valor: O valor do input é controlado pelo estado (useState). Se você não atualiza o estado, o valor do input não atualiza para o usuário.
  • Recebendo o valor: Você recebe o valor digitado pelo usuário através do evento onChange, acessando a propriedade target.value do argumento passado como evento (no código acima, e).
  • Exibindo o valor: Você passa o valor do seu estado para o input através da propriedade value. No exemplo acima, value={valor}.

Isso já está correto no código da pergunta. A questão é: como limpar o input?

Uma vez que você tenha entendido como funciona o armazenamento, recebimento e exibição do valor do input, espero que já saiba como limpar o input: basta limpar o estado. Veja o exemplo abaixo:

function Form() {
  const [valor, setValor] = React.useState('');

  return (
    <form>
      <input onChange={(e) => setValor(e.target.value)} value={valor} />
      <button onClick={() => setValor('')} type="button">Limpar</button>
    </form>
  );
}

ReactDOM.render(<Form /> , document.querySelector("#app"));
<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>

<div id="app"></div>

Se você possui vários inputs, não é muito diferente do exemplo, basta limpar todos os estados:

function limparInputs() {
  setInput1('');
  setInput2('');
  setInput3('');
}
2
  • +1 @Mpimenta no seu caso, voce poderia chamar limparInputs dentro de calcular3, logo após o o bloco if, mas claro, assumindo que teria um tratamento para casos de erros de valores. Commented 26/08/2021 às 11:38
  • Consegui fazer colocando um botão limpar chamando limparInputs
    – Mpimenta
    Commented 27/08/2021 às 1:40

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .