Skip to main content
Adicionando exemplo para limpar vários inputs
Fonte Link
Rafael Tavares
  • 5,2mil
  • 11
  • 31
  • 52

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('');
}

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>

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('');
}
Fonte Link
Rafael Tavares
  • 5,2mil
  • 11
  • 31
  • 52

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>