Форма реакции не отображает правильные данные на экране после того, как я нажму кнопку отправки

Question

Это форма React. Я пытался отобразить Hello {firstName} {lastName} после того, как пользователь вводит данные и нажимает кнопку отправки . Однако он не записывает входные данные должным образом и не отображает их правильно после нажатия кнопки отправки. Пожалуйста, помогите !!!

import React, { useState } from 'react';

function App() {
  const [newName, setNewName] = useState({
    fName: '',
    lName: ''
  });
  const [fullName, setFullName] = useState(newName);

  function handleOnSubmit(event) {
    console.log(newName);
    setFullName(newName);
    event.preventDefault();
  }

  function handleOnChange(event) {
    console.log(newName);
    var { value, name } = event.target;
    setNewName((prevValue) => {
      if (name === 'fName')
        return {
          fName: value,
          lName: prevValue.lName
        };
      else
        return {
          fName: prevValue.fName,
          lName: value
        };
    });
  }

  return (
    <div className='container'>
      <h1>
        Hello {fullName.fName} {fullName.lName}
      </h1>
      <form onSubmit={handleOnSubmit}>
        <input
          name='fName'
          placeholder='First Name'
          onChange={handleOnChange}
          value={fullName.fName}
        />
        <input
          name='lName'
          placeholder='Last Name'
          onChange={handleOnChange}
          value={fullName.lName}
        />
        <button type='submit'>Submit</button>
      </form>
    </div>
  );
}

export default App;

Answer 1

Попробуйте использовать это: Мы собираемся создать настраиваемый крючок Input.

useInput.js file

//input custom hook

import { useState } from "react";
function useInput(initialValue = "") {
  const [value, setValue] = useState(initialValue);
  const reset = () => {
    setValue(initialValue);
  };
  const bind = {
    value,
    onChange: (e) => setValue(e.target.value),
  };
  return [value, bind, reset];
}
export default useInput;

Вот как вы можете использовать этот Input custom hook:

import React from "react";
import useInput from "../hooks/useInput";
function Test() {
  const [firstName, bindFirstName, resetFirstName] = useInput("");
  const [lastName, bindLastName, resetLastName] = useInput("");
  const handleSubmit = (e) => {
     e.preventDefault();
     alert(`hello ${firstName} ${lastName}`); // you can change this as per your requirement
     resetFirstName();
     resetLastName();
  };
  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input type="text" {...bindFirstName} />
        <input type="text" {...bindLastName} />
        <button value="submit" type="submit">
          Submit
        </button>
      </form>
    </div>
  );
}
export default Test;

Answer 2

Проблема заключалась в обработке событий в полях ввода. По значению вы связали fullName.fName и fullName.lName, но onChange вы обновляете состояние newName, а состояние fullName изменяется только при нажатии кнопки «Отправить». Обновите код формы, как показано ниже. Это должно сработать для вас!

<form onSubmit={handleOnSubmit}>
        <input
          name="fName"
          placeholder="First Name"
          onChange={handleOnChange}
          value={newName.fName}
        />
        <input
          name="lName"
          placeholder="Last Name"
          onChange={handleOnChange}
          value={newName.lName}
        />
        <button type="submit">Submit</button>
      </form>