React Hooks personalizado para formulário com múltiplos inputs

• Utilizando o hook useState (tradicional)

Arquivo: form.js

import React, { useState } from 'react';

const Form = () => {

  const [nome, setNome] = useState('');

  const [sobrenome, setSobreome] = useState('');

  const submitHandler = e => {

    e.preventDefault();

    alert(`Nome completo: ${nome} ${sobrenome}`);

setNome('');

setSobreome('');

  };

  return (

    <div>

      <form onSubmit={submitHandler}>

        <div>

          <label>Nome:</label>

          <input value={nome} onChange={e => setNome(e.target.value)} />

        </div>

        <div>

          <label>Sobrenome:</label>

          <input value={sobrenome} onChange={e => setSobreome(e.target.value)} />

        </div>

        <button type="submit">Submit</button>

      </form>

    </div>

  );

};

export default Form;

• Utilizando o hook useForm (personalizado/custom)

Arquivo: useForm.js

import { useState } from 'react';

const useForm = initialValues => {

  const [values, setValues] = useState(initialValues);

  const bind = name => {

    return {

      value: values[name],

      onChange: e => setValues(oldValues => ({ ...oldValues, [name]: e.target.value }))

    };

  };

  const reset = () => {

    setValues(initialValues);

  };

  return [values, bind, reset];

};

export default useForm;

Arquivo: form.js

import React from 'react';

import { useForm } from './useForm';

const Form = () => {

  const [campos, bindCampo, limparCampos] = useForm({ nome: '', sobrenome: '' });

  const submitHandler = e => {

    e.preventDefault();

    alert(`Nome completo: ${campos.nome} ${campos.sobrenome}`);

    limparCampos();

  };

  return (

    <div>

      <form onSubmit={submitHandler}>

        <div>

          <label>Nome:</label>

          <input {...bindCampo('nome')} />

        </div>

        <div>

          <label>Sobrenome:</label>

          <input {...bindCampo('sobrenome')} />

        </div>

        <button type="submit">Submit</button>

      </form>

    </div>

  );

};

export default Form;

Referência(s): 

Usando o State do Hook

React Hooks Tutorial - 33 - useInput Custom Hook