Блог

я хотел бы упростить создание формы, избегая записи для каждого fied value={} и onChange={} используя пользовательский хук.

это мой код: https://codesandbox.io/s/busy-noether-pql8x?file=/src/App.js

проблема в том, что каждый раз, когда я нажимаю кнопку, состояние очищается, за исключением поля, которое я редактировал в данный момент

 import React, { useState } from "react";
import "./styles.css";

const useFormField = (initialValue) => {
  const [values, setValues] = React.useState(initialValue);
  const onChange = React.useCallback((e) => {
    const name = e.target.name;
    const value = e.target.value;
    setValues( (prevValues) =>  ({...prevValues,[name]:value}));
  }, []);
  return { values, onChange };
};

export default function App() {
 

  //hoot to simplify the code,
  const {values,onChange} = useFormField({
    Salary: "",
    Email: ""
  })

  const onCreateUser = () => {
    console.log(values);
  };

  return (
    <div className="App">
      <form>
        <label htmlFor="Email">Email: </label>
        <input name="Email" onChange={onChange}  />
        <label htmlFor="Email">Salary: </label>
        <input name="Salary" onChange={onChange}  />
        <button type="button" onClick={onCreateUser}>
          Send
        </button>
      </form>
    </div>
  );
}