Reactjs Значение элементов ввода формы машинописного текста не работает

Question

Я новичок в React и делаю многошаговую контактную форму. Я сделал функцию handleChange, где я получаю значение ввода, поэтому, когда я go предыдущий или следующий, отображается содержимое ввода, так что вы можете редактировать его. Первый ввод работает отлично, но у меня возникает проблема, когда я помещаю value={text} во второй вход, когда я нажимаю следующий, он застревает на первом входе. Пожалуйста, помогите.

import React, {useState} from "react";
import {useStep} from "react-hooks-helper";


const Contact: React.FC = () => {

    const [text, setText] = useState("")
    const {index, navigation: {previous, next},} = useStep({steps: 4});

    function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
        const {value} = e.target
        setText(value)
    }

    return (
        <div className="contact">
            <div className="contact-inner">
                <form>
                    {index === 0 && <label>
                        <input onChange={handleChange} value={text}  type="text" name="name"
                               placeholder={"Please enter your name"}/>
                    </label>}
                    {index === 1 && <label htmlFor="email">
                        <input  type="text" name="email" placeholder="Please enter your email"/>
                    </label>}
                    {index === 2 && <label>
                        <input  type="text" name="title"
                               placeholder="Please enter the title"/>
                    </label>}
                    {index === 3 && <label>
                        <textarea className="content" name="content" placeholder="Please enter your message"/>
                    </label>}


                </form>
                <div className="buttons">
                    <button className="previous" onClick={previous}>previous</button>
                    <button className="next" onClick={next}>{index === 3 ? 'Submit' : 'Next'}</button>
                </div>

            </div>
        </div>
    )
}

export default Contact

Answer 1

Сейчас у вас есть только одно текстовое состояние, вам, вероятно, следует создать состояние для каждого из ваших входов:

const [contact, setContact] = useState({
  name: "",
  email: "",
  title: ""
});

Затем вы можете отобразить правильное значение для каждого ввода:

<input name='email' value={contact.email} ...

И обновите функцию handleChange:

function handleChange(event) {
  const {name, value} = event.target;
  setContact({ ...contact, [name]: value });
}