Блог

 import React, { useState } from 'react'

const App = () => {

    const [fullname, updatfullNa] = useState({
        fName:'',
        lName:'',
        eMail:'',
        pHone:''
    })

    const Inputevent = (event) => {
        // const value = event.target.value
        // const name = event.target.name
        const{value, name}=event.target

        updatfullNa((preValue) => {
            if (name === 'fName') {
                return { 
                    fName: value,
                    lName: preValue.lName,
                    eMail:preValue.eMail,
                    pHone:preValue.pHone

                }
            }
            else if (name === 'lName') {
                return { 
                    fName: preValue.fName,
                    lName: value,
                    eMail:preValue.eMail,
                    pHone :preValue.pHone
                }
            } else if (name === 'eMail') {
                return { 
                    fName: preValue.fName,
                    lName: preValue.lName,
                    eMail:value

                }
            } 
            else if (name === 'pHone') {
                return { 
                    fName: preValue.fName,
                    lName: preValue.lName,
                    eMail:preValue.eMail,
                    pHone:value
                }
            } 
        })

    }

    const onSubmit = (event) => {
        event.preventDefault()
    
    }

    return (<>
        <form onSubmit={onSubmit} >
            <div className="form">
                <h1>Hello {fullname.fName} {fullname.lName} <br/>
                <span className="EP"> {fullname.eMail} <br/>{fullname.pHone} </span> </h1>
                <input type="text" placeholder="Enter Your Name"
                    name="fName"
                    onChange={Inputevent}  value={fullname.fName}/>
              
                <input type="text" placeholder="Enter Your Last Name" name="lName" onChange={Inputevent}  value={fullname.lName}/>

                <input type="email" placeholder="Enter Your Email" name="eMail" onChange={Inputevent}  value={fullname.eMail}/>

                <input type="number" placeholder="Enter Your Phone Number" name="pHone" onChange={Inputevent}  value={fullname.pHone}/>
        
                <button type="submit" >Submit me 👍</button>
            </div>
        </form>

    </>
    )
}
export default App
 

Предупреждение: Компонент изменяет контролируемый вход на неконтролируемый. Вероятно, это вызвано изменением значения с определенного на неопределенное, чего не должно происходить. Решите, использовать ли управляемый или неконтролируемый входной элемент в течение всего срока службы компонента. Дополнительная информация: https://reactjs.org/link/controlled-components

форма ввода div
App@http://localhost:3000/static/js/main.chunk.js:52:89

Проблема здесь , когда name === 'eMail' вы возвращаете приведенное ниже состояние, которое не имеет значения для pHone .

  return { 
                fName: preValue.fName,
                lName: preValue.lName,
                eMail:value

            }
 

Также рассмотрите возможность рефакторинга вашего кода, как показано ниже

 const Inputevent = (event) => {
  // const value = event.target.value
  // const name = event.target.name
  const{value, name}=event.target

  updatfullNa((prevState) => ({...prevState, [name]: value }))
}
 

... Перед состоянием PREV говорится, что скопируйте все состояние PREV в новый объект и просто обновите значение ключа [имя]

Ссылаться

Использование оператора распространения для объектов